shadimage
Soundcn
blockback-002source: ok · refreshed

Back 002

A slightly more pronounced but still short sound for navigating back or cancelling an action in a UI.

npx shadcn add "https://soundcn.xyz/r/back-002.json"
free

No selection tags yet — empty means no evidence, not lack of support.

Files3 · source cached 10/2/2026, 1:23:22 AM

registry/soundcn/sounds/back-002/back-002.ts
import type { SoundAsset } from "@/lib/sound-types";

export const back002Sound: SoundAsset = {
  name: "back-002",
  dataUri: "data:audio/mpeg;base64,SUQzBAAAAAAAIlRTU0UAAAAOAAADTGF2ZjYyLjMuMTAwAAAAAAAAAAAAAAD/+1DAAAAAAAAAAAAAAAAAAAAAAABJbmZvAAAADwAAAAUAAATkAFVVVVVVVVVVVVVVVVVVVVVVVVV/f39/f39/f39/f39/f39/f39/f6qqqqqqqqqqqqqqqqqqqqqqqqqq1dXV1dXV1dXV1dXV1dXV1dXV1dX//////////////////////////wAAAABMYXZjNjIuMTEAAAAAAAAAAAAAAAAkBIAAAAAAAAAE5OVi6eEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//tQxAAACbAjTvWAgBFvkepDNvAAACCSSnQYwprr4ABDQo1IMgC4iuGvv+/7/v/G5fTg4CAIBiGOkH5cHwQBAEAQBMHwfB8HwQBAEAQAYPg/u/pBAEAx/BAEP/+f1g4GJQEDZboxkVN0WjbF5/E5jDA1OYzYMDA4wESYKoMu4wgEV49qVSlQ0SQpLJ5DW5mQ8vCnQ5mZn1XsFC3qjnljZbcWtmrPGeTwL1rnWv//ExE8QTKCj+Hg+H3Tv0kEISo4wzcoCgtg1FQS8VCQNyIRFv/7UsQIgAwYmVYZl4ABbRDrQzDwAMGWyBkihIvRFZOYQ6IBYCXx0eJqSIti8p6O4BxkqV7AxNsKZkzdQqVUrp893Gi33r0qxQ31596vumtZvfxYMWEWC4JizaIPEg0Ksd/CrBoxdb9CERlMYhA4DmGUYKNWhAIAg+zdgRf4FAbRWVHyPSPgWB+dCsLi3Mzo0FQyKNnj7xaE/QiCzvKa/gvXsKM4Q38V/733SkISnS4PlzQP8sJQUCwZDHqBrkClz4cQTCRzIRdtQAoe0GjMQ4lB//tSxAiAC3yNWBmHgAGUm2pnMSAATSi/wkoHMcmGoa8IQGellUTqdiMwhRkqmJRRQn1jzTaMQ9vg78kauNt7ZK9fZpjWa/NfWaLPEBMOlDgu6IAqBgH6uBAuKht3/QaWAgBB5x5hhhAAYGjqoAkUHeaYm1EMyn/AiRES9Tf4WOgbsZPgh8LmgCBLpie4N5AxSHtCU0lOvwy8M+N4QlIgtlfxmhyh3DknSC//kcakWKZeKJp//kyYGxkfLpiamX/hUGQRIh00ujE3MKUxpF4wgGP/+1LEBgML/GsIHdeACQUHng2XmCAwkDwxZBAwwDsRBUYRgSYTgcYFBCDASKArMEgJCoHFpxYEQCAAQoLsGKGcSseI9RsnAXE3lehKHMayol+Oytz9xfQ5n0k8WFeLCuhlJJaUspJLZvYCSciZj0HWQpiRiVNZWIUfw3S8sKoJArMCo6aChLcrAYkBnqdEUkLlkDNL20bPsq8g5XTt7G9+z/5Z/3UneGuWyFUAS4QMeNEX8YQkYEqohuq9EI8uMy8Jsj3HKmAUCYiEM58EQatYVf/7UsQTA83ooMYsPSNAAAA0gAAABCWyWxUAMBo0VAMAITJikUslgsKWaRInqkIpatVDkkSJFkpSuKFkaCoiBpdYKjAZLA1wVcWh33dmrf/4h5V+InowVfU8KAVIaHvVTEFNRTMuMTAwVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV",
  duration: 0.091,
  format: "mp3",
  license: "CC0",
  author: "Kenney",
};
registry/soundcn/lib/sound-types.ts
export interface SoundAsset {
  /** Unique identifier for the sound */
  name: string;
  /** Base64-encoded data URI (data:audio/mpeg;base64,...) */
  dataUri: string;
  /** Duration in seconds */
  duration: number;
  /** Audio format */
  format: "mp3" | "wav" | "ogg";
  /** License identifier */
  license: "CC0" | "OGA-BY" | "MIT";
  /** Original author/creator */
  author: string;
}

export interface UseSoundOptions {
  /** Volume level from 0 to 1. Default: 1 */
  volume?: number;
  /** Playback speed multiplier. Default: 1 */
  playbackRate?: number;
  /** If true, calling play() stops current playback first. Default: false */
  interrupt?: boolean;
  /** If false, play() does nothing. Useful for user preferences. Default: true */
  soundEnabled?: boolean;
  /** Called when playback starts */
  onPlay?: () => void;
  /** Called when playback ends naturally */
  onEnd?: () => void;
  /** Called when pause() is called */
  onPause?: () => void;
  /** Called when stop() is called */
  onStop?: () => void;
}

export type PlayFunction = (overrides?: {
  volume?: number;
  playbackRate?: number;
}) => void;

export interface SoundControls {
  stop: () => void;
  pause: () => void;
  isPlaying: boolean;
  duration: number | null;
  sound: SoundAsset;
}

export type UseSoundReturn = readonly [PlayFunction, SoundControls];
registry/soundcn/lib/sound-engine.ts
let audioContext: AudioContext | null = null;
const bufferCache = new Map<string, AudioBuffer>();

export function getAudioContext(): AudioContext {
  if (!audioContext) {
    audioContext = new AudioContext();
  }
  return audioContext;
}

export async function decodeAudioData(dataUri: string): Promise<AudioBuffer> {
  const cached = bufferCache.get(dataUri);
  if (cached) return cached;

  const ctx = getAudioContext();
  const base64 = dataUri.split(",")[1];
  const binaryString = atob(base64);
  const bytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }

  const audioBuffer = await ctx.decodeAudioData(bytes.buffer.slice(0));
  bufferCache.set(dataUri, audioBuffer);
  return audioBuffer;
}

export interface PlaySoundOptions {
  volume?: number;
  playbackRate?: number;
  onEnd?: () => void;
}

export interface SoundPlayback {
  stop: () => void;
}

export async function playSound(
  dataUri: string,
  options: PlaySoundOptions = {}
): Promise<SoundPlayback> {
  const { volume = 1, playbackRate = 1, onEnd } = options;
  const ctx = getAudioContext();
  if (ctx.state === "suspended") {
    await ctx.resume();
  }

  const buffer = await decodeAudioData(dataUri);
  const source = ctx.createBufferSource();
  const gain = ctx.createGain();

  source.buffer = buffer;
  source.playbackRate.value = playbackRate;
  gain.gain.value = volume;

  source.connect(gain);
  gain.connect(ctx.destination);

  source.onended = () => {
    onEnd?.();
  };

  source.start(0);

  return {
    stop: () => {
      try {
        source.stop();
      } catch {
        // No-op if already stopped.
      }
    },
  };
}

More from Soundcn

Browse all components in this library →