Sound System

"use client";

import React, { useCallback, useRef, useState } from "react";

import { cn } from "@/lib/utils";

import { Volume2, VolumeX } from "lucide-react";

let globalAudioCtx: AudioContext | null = null;

function getAudioContext() {

if (typeof window === "undefined") return null;

if (!globalAudioCtx) {

globalAudioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();

}

if (globalAudioCtx.state === "suspended") {

globalAudioCtx.resume();

}

return globalAudioCtx;

}

const SOUND_CATEGORIES = [

{

title: "Presses",

description: "A thing being hit.",

items: [

{ id: "tap", label: "tap", description: "Any button. By volume, the sound of the whole app." },

{ id: "select", label: "select", description: "A menu row, a tab, an option. Pitched by its place." },

{ id: "destructive", label: "destructive", description: "A destructive button. Lower and heavier, so it lands." }

]

},

{

title: "Toggles",

description: "Direction carries the state.",

items: [

{ id: "toggleOn", label: "toggleOn", description: "A switch, checkbox or toggle going on. It rises." },

{ id: "toggleOff", label: "toggleOff", description: "The same control going off. It falls." }

]

},

{

title: "Surfaces",

description: "Slower than a press, because the room changed.",

items: [

{ id: "open", label: "open", description: "A dialog, popover, accordion or menu arriving." },

{ id: "close", label: "close", description: "The surface leaving, or the button that shuts it." },

{ id: "swoosh", label: "swoosh", description: "The press that ends and shuts the surface. Also unmute." }

]

},

{

title: "Values",

description: "Nearly subliminal, because they repeat.",

items: [

{ id: "tick", label: "tick", description: "Taking hold of a slider, or stepping a value." },

{ id: "sliderTick", label: "sliderTick", description: "Every value a drag passes through. The quietest here." },

{ id: "key", label: "key", description: "Each digit of a one-time code, pitched by its position." }

]

},

{

title: "Outcomes",

description: "The only cues allowed to be a phrase.",

items: [

{ id: "success", label: "success", description: "Two notes, upward. It resolves." },

{ id: "error", label: "error", description: "Two notes, downward. It does not." },

{ id: "warning", label: "warning", description: "The same note twice. It insists." }

]

},

{

title: "Named",

description: "Asked for by a control through data-sound.",

items: [

{ id: "copy", label: "copy", description: "Taken to the clipboard. Two clicks, like a shutter." },

{ id: "notification", label: "notification", description: "The interface changing under you: the theme swapping." },

{ id: "chirp", label: "chirp", description: "Clearing a field or chip, or one step into the palette." },

{ id: "command", label: "command", description: "Running a palette command. The other half of chirp." },

{ id: "blocked", label: "blocked", description: "A press that will not be answered. Dead on purpose." }

]

}

];

export function SoundSystem() {

const [muted, setMuted] = useState(false);

const playingRef = useRef<string | null>(null);

const [, forceRender] = useState({});

const playSound = useCallback((id: string) => {

if (muted) return;

const ctx = getAudioContext();

if (!ctx) return;

const t = ctx.currentTime + 0.02;

console.log("Playing sound:", id);

playingRef.current = id;

forceRender({});

// Auto reset the active state after animation

setTimeout(() => {

if (playingRef.current === id) {

playingRef.current = null;

forceRender({});

}

}, 400);

const playTone = (freq: number, type: OscillatorType, time: number, dur: number, vol: number = 0.5, slideFreq?: number) => {

const osc = ctx.createOscillator();

const gain = ctx.createGain();

osc.type = type;

osc.frequency.setValueAtTime(freq, time);

if (slideFreq) {

osc.frequency.exponentialRampToValueAtTime(slideFreq, time + dur);

}

gain.gain.setValueAtTime(0, time);

gain.gain.linearRampToValueAtTime(vol * 3, time + dur * 0.1); // Increased volume x3

gain.gain.exponentialRampToValueAtTime(0.001, time + dur);

osc.connect(gain);

gain.connect(ctx.destination);

osc.start(time);

osc.stop(time + dur);

};

const playNoise = (time: number, dur: number, vol: number = 0.5) => {

const bufferSize = ctx.sampleRate * dur;

const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);

const data = buffer.getChannelData(0);

for (let i = 0; i < bufferSize; i++) {

data[i] = Math.random() * 2 - 1;

}

const noise = ctx.createBufferSource();

noise.buffer = buffer;

const filter = ctx.createBiquadFilter();

filter.type = 'bandpass';

filter.frequency.setValueAtTime(1000, time);

filter.frequency.linearRampToValueAtTime(4000, time + dur);

const gain = ctx.createGain();

gain.gain.setValueAtTime(0, time);

gain.gain.linearRampToValueAtTime(vol * 3, time + dur * 0.1); // Increased volume x3

gain.gain.exponentialRampToValueAtTime(0.001, time + dur);

noise.connect(filter);

filter.connect(gain);

gain.connect(ctx.destination);

noise.start(time);

noise.stop(time + dur);

};

switch(id) {

case 'tap':

playTone(700, 'sine', t, 0.05, 0.15);

playTone(1200, 'triangle', t, 0.03, 0.05);

break;

case 'select':

playTone(900, 'sine', t, 0.05, 0.15);

playTone(1500, 'triangle', t, 0.03, 0.05);

break;

case 'destructive':

playTone(150, 'sawtooth', t, 0.15, 0.2, 50);

playNoise(t, 0.1, 0.1);

break;

case 'toggleOn':

playTone(400, 'sine', t, 0.1, 0.1);

playTone(600, 'sine', t + 0.1, 0.15, 0.1);

break;

case 'toggleOff':

playTone(600, 'sine', t, 0.1, 0.1);

playTone(400, 'sine', t + 0.1, 0.15, 0.1);

break;

case 'open':

playTone(300, 'sine', t, 0.2, 0.1, 600);

playNoise(t, 0.2, 0.03);

break;

case 'close':

playTone(600, 'sine', t, 0.2, 0.1, 300);

playNoise(t, 0.2, 0.03);

break;

case 'swoosh':

playNoise(t, 0.3, 0.15);

break;

case 'tick':

playTone(1800, 'triangle', t, 0.015, 0.03);

break;

case 'sliderTick':

playTone(2200, 'triangle', t, 0.01, 0.01);

break;

case 'key':

playTone(1200, 'sine', t, 0.05, 0.05);

playTone(2000, 'sine', t, 0.03, 0.02);

break;

case 'success':

playTone(440, 'sine', t, 0.1, 0.1);

playTone(554, 'sine', t + 0.1, 0.1, 0.1); // C#

playTone(659, 'sine', t + 0.2, 0.4, 0.15); // E

break;

case 'error':

playTone(300, 'sawtooth', t, 0.15, 0.1);

playTone(250, 'sawtooth', t + 0.15, 0.3, 0.1);

break;

case 'warning':

playTone(400, 'square', t, 0.1, 0.05);

playTone(400, 'square', t + 0.2, 0.2, 0.05);

break;

case 'copy':

playNoise(t, 0.02, 0.1);

playNoise(t + 0.06, 0.02, 0.1);

break;

case 'notification':

playTone(700, 'sine', t, 0.15, 0.1);

playTone(1050, 'sine', t + 0.15, 0.4, 0.15);

break;

case 'chirp':

playTone(900, 'sine', t, 0.15, 0.1, 1400);

break;

case 'command':

playTone(1400, 'sine', t, 0.15, 0.1, 900);

break;

case 'blocked':

playTone(150, 'triangle', t, 0.08, 0.15);

break;

}

}, [muted]);

return (

<div className="w-full max-w-[900px] mx-auto py-6 px-4 bg-transparent text-zinc-900 dark:text-[#F5F5F7] font-matter">

<div className="w-full">

<div className="flex items-center justify-between mb-12">

<div>

<h1 className="text-2xl font-medium font-matter mb-2 text-zinc-900 dark:text-[#F5F5F7]">Sound System</h1>

<p className="text-zinc-500 dark:text-[#86868B] text-sm font-matter">Synthetic Web Audio interactions.</p>

</div>

<button

onClick={() => setMuted(!muted)}

className="p-3 rounded-full bg-zinc-100 dark:bg-gradient-to-b dark:from-[#242426] dark:to-[#141416] hover:bg-zinc-200 dark:hover:from-[#2C2C2E] dark:hover:to-[#1C1C1E] border border-zinc-200/80 dark:border-white/10 transition-all text-zinc-600 dark:text-[#86868B] hover:text-zinc-900 dark:hover:text-[#F5F5F7] shadow-sm"

>

{muted ? <VolumeX size={20} /> : <Volume2 size={20} />}

</button>

</div>

<div className="flex flex-col gap-10">

{SOUND_CATEGORIES.map((category) => (

<div key={category.title}>

<div className="flex items-baseline gap-3 mb-5">

<h2 className="text-[15px] font-medium font-matter text-zinc-900 dark:text-[#F5F5F7]">{category.title}</h2>

<span className="text-[14px] font-matter text-zinc-500 dark:text-[#86868B]">{category.description}</span>

</div>

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">

{category.items.map((item) => (

<button

key={item.id}

onClick={() => playSound(item.id)}

className={cn(

"flex flex-col text-left p-4.5 rounded-xl bg-white dark:bg-gradient-to-b dark:from-[#1C1C1E] dark:to-[#0A0A0C] border border-zinc-200/80 dark:border-white/5 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] shadow-sm",

"hover:bg-zinc-50 hover:border-zinc-300 dark:hover:from-[#242426] dark:hover:to-[#0F0F12] dark:hover:border-white/15 dark:hover:shadow-[0_8px_30px_rgba(0,0,0,0.6),inset_0_1px_0_rgba(255,255,255,0.12)] transition-all duration-200 active:scale-[0.98]",

playingRef.current === item.id ? "bg-zinc-100 border-zinc-300 ring-1 ring-zinc-300/50 dark:from-[#2C2C2E] dark:to-[#141416] dark:border-white/20 dark:ring-white/10" : ""

)}

>

<span className="font-mono text-[13px] text-zinc-800 dark:text-[#F5F5F7] mb-2">{item.label}</span>

<span className="text-[13.5px] font-matter leading-relaxed text-zinc-500 dark:text-[#86868B]">{item.description}</span>

</button>

))}

</div>

</div>

))}

</div>

</div>

</div>

);

}