-
-
Soundboard coming soon
+
+
+
+
+
@@ -192,4 +199,5 @@ import { RandomTables } from "./RandomTables";
import { CalendarWidget } from "./CalendarWidget";
import { WorldBuilder } from "./WorldBuilder";
import { QuestDesigner } from "./QuestDesigner";
-import { ItemForge } from "./ItemForge";
\ No newline at end of file
+import { ItemForge } from "./ItemForge";
+import { Soundboard } from "./Soundboard";
\ No newline at end of file
diff --git a/src/components/Soundboard.tsx b/src/components/Soundboard.tsx
new file mode 100644
index 0000000..94473d5
--- /dev/null
+++ b/src/components/Soundboard.tsx
@@ -0,0 +1,327 @@
+import { useState, useRef, useCallback } from "react";
+import { useToast } from "./Toast";
+
+// Ambient sound types with their oscillator configs
+const AMBIENT_SOUNDS = [
+ { id: "rain", label: "Rain", icon: "🌧", type: "brown" as const, freq: 0, filterFreq: 800 },
+ { id: "wind", label: "Wind", icon: "💨", type: "brown" as const, freq: 0, filterFreq: 400 },
+ { id: "fire", label: "Fire", icon: "🔥", type: "brown" as const, freq: 0, filterFreq: 200 },
+ { id: "ocean", label: "Ocean", icon: "🌊", type: "sine" as const, freq: 80, filterFreq: 1200 },
+ { id: "forest", label: "Forest", icon: "🌲", type: "brown" as const, freq: 0, filterFreq: 3000 },
+ { id: "tavern", label: "Tavern", icon: "🍺", type: "brown" as const, freq: 0, filterFreq: 600 },
+ { id: "thunder", label: "Thunder", icon: "⛈", type: "sawtooth" as const, freq: 40, filterFreq: 200 },
+ { id: "cave", label: "Cave", icon: "🪨", type: "sine" as const, freq: 55, filterFreq: 150 },
+];
+
+// Sound effect one-shots
+const SFX_SOUNDS = [
+ { id: "sword", label: "Sword", icon: "⚔" },
+ { id: "bow", label: "Bow", icon: "🏹" },
+ { id: "spell", label: "Spell", icon: "✨" },
+ { id: "door", label: "Door", icon: "🚪" },
+ { id: "coins", label: "Coins", icon: "💰" },
+ { id: "horn", label: "Horn", icon: "📯" },
+ { id: "dice", label: "Dice", icon: "🎲" },
+ { id: "footsteps", label: "Steps", icon: "👣" },
+];
+
+export function Soundboard() {
+ const [activeAmbients, setActiveAmbients] = useState
>(new Set());
+ const [volume, setVolume] = useState(0.5);
+ const audioCtxRef = useRef(null);
+ const nodesRef = useRef>(new Map());
+ const { addToast } = useToast();
+
+ const getAudioCtx = useCallback(() => {
+ if (!audioCtxRef.current) {
+ audioCtxRef.current = new AudioContext();
+ }
+ return audioCtxRef.current;
+ }, []);
+
+ const toggleAmbient = useCallback((id: string) => {
+ setActiveAmbients((prev) => {
+ const next = new Set(prev);
+ if (next.has(id)) {
+ next.delete(id);
+ // Stop the sound
+ const nodes = nodesRef.current.get(id);
+ if (nodes) {
+ nodes.gain.gain.linearRampToValueAtTime(0, audioCtxRef.current!.currentTime + 0.5);
+ setTimeout(() => {
+ nodes.source.stop();
+ nodesRef.current.delete(id);
+ }, 600);
+ }
+ } else {
+ next.add(id);
+ // Start the sound
+ const sound = AMBIENT_SOUNDS.find((s) => s.id === id);
+ if (!sound) return next;
+
+ const ctx = getAudioCtx();
+ const gainNode = ctx.createGain();
+ gainNode.gain.value = 0; // Start silent, fade in
+ gainNode.gain.linearRampToValueAtTime(volume, ctx.currentTime + 1);
+
+ const filter = ctx.createBiquadFilter();
+ filter.type = "lowpass";
+ filter.frequency.value = sound.filterFreq;
+
+ let source: OscillatorNode | AudioBufferSourceNode;
+
+ if (sound.type === "brown") {
+ // Brown noise via buffer
+ const bufferSize = ctx.sampleRate * 2;
+ const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
+ const data = buffer.getChannelData(0);
+ let last = 0;
+ for (let i = 0; i < bufferSize; i++) {
+ const white = Math.random() * 2 - 1;
+ data[i] = (last + 0.02 * white) / 1.02;
+ last = data[i];
+ data[i] *= 3.5; // Normalize
+ }
+ source = ctx.createBufferSource();
+ source.buffer = buffer;
+ source.loop = true;
+ } else {
+ // Oscillator
+ source = ctx.createOscillator();
+ source.type = sound.type;
+ source.frequency.value = sound.freq;
+ }
+
+ source.connect(filter);
+ filter.connect(gainNode);
+ gainNode.connect(ctx.destination);
+ source.start();
+
+ nodesRef.current.set(id, { source, gain: gainNode, filter });
+ }
+ return next;
+ });
+ }, [volume, getAudioCtx]);
+
+ const playSfx = useCallback((id: string) => {
+ const ctx = getAudioCtx();
+ const sfx = SFX_SOUNDS.find((s) => s.id === id);
+ if (!sfx) return;
+
+ // Create simple synthesized sound effects
+ const gain = ctx.createGain();
+ gain.gain.value = volume;
+ gain.connect(ctx.destination);
+
+ switch (id) {
+ case "sword": {
+ const osc = ctx.createOscillator();
+ osc.type = "sawtooth";
+ osc.frequency.setValueAtTime(800, ctx.currentTime);
+ osc.frequency.exponentialRampToValueAtTime(200, ctx.currentTime + 0.15);
+ gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.2);
+ osc.connect(gain);
+ osc.start(ctx.currentTime);
+ osc.stop(ctx.currentTime + 0.2);
+ break;
+ }
+ case "bow": {
+ const osc = ctx.createOscillator();
+ osc.type = "sine";
+ osc.frequency.setValueAtTime(1200, ctx.currentTime);
+ osc.frequency.exponentialRampToValueAtTime(100, ctx.currentTime + 0.3);
+ gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3);
+ osc.connect(gain);
+ osc.start(ctx.currentTime);
+ osc.stop(ctx.currentTime + 0.3);
+ break;
+ }
+ case "spell": {
+ const osc = ctx.createOscillator();
+ osc.type = "sine";
+ osc.frequency.setValueAtTime(300, ctx.currentTime);
+ osc.frequency.linearRampToValueAtTime(900, ctx.currentTime + 0.4);
+ osc.frequency.linearRampToValueAtTime(300, ctx.currentTime + 0.8);
+ gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.8);
+ osc.connect(gain);
+ osc.start(ctx.currentTime);
+ osc.stop(ctx.currentTime + 0.8);
+ break;
+ }
+ case "door": {
+ const bufferSize = ctx.sampleRate * 0.3;
+ 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) * Math.exp(-i / (ctx.sampleRate * 0.05));
+ }
+ const source = ctx.createBufferSource();
+ source.buffer = buffer;
+ const filter = ctx.createBiquadFilter();
+ filter.type = "lowpass";
+ filter.frequency.value = 500;
+ source.connect(filter);
+ filter.connect(gain);
+ source.start(ctx.currentTime);
+ break;
+ }
+ case "coins": {
+ for (let i = 0; i < 5; i++) {
+ const osc = ctx.createOscillator();
+ const coinGain = ctx.createGain();
+ osc.type = "sine";
+ osc.frequency.value = 2000 + Math.random() * 2000;
+ coinGain.gain.setValueAtTime(volume * 0.3, ctx.currentTime + i * 0.08);
+ coinGain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + i * 0.08 + 0.15);
+ osc.connect(coinGain);
+ coinGain.connect(ctx.destination);
+ osc.start(ctx.currentTime + i * 0.08);
+ osc.stop(ctx.currentTime + i * 0.08 + 0.15);
+ }
+ break;
+ }
+ case "horn": {
+ const osc = ctx.createOscillator();
+ osc.type = "sawtooth";
+ osc.frequency.value = 220;
+ const filter = ctx.createBiquadFilter();
+ filter.type = "lowpass";
+ filter.frequency.setValueAtTime(400, ctx.currentTime);
+ filter.frequency.linearRampToValueAtTime(2000, ctx.currentTime + 0.1);
+ gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.6);
+ osc.connect(filter);
+ filter.connect(gain);
+ osc.start(ctx.currentTime);
+ osc.stop(ctx.currentTime + 0.6);
+ break;
+ }
+ case "dice": {
+ for (let i = 0; i < 8; i++) {
+ const bufferSize = ctx.sampleRate * 0.04;
+ const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
+ const data = buffer.getChannelData(0);
+ for (let j = 0; j < bufferSize; j++) {
+ data[j] = (Math.random() * 2 - 1) * Math.exp(-j / (ctx.sampleRate * 0.01));
+ }
+ const source = ctx.createBufferSource();
+ source.buffer = buffer;
+ const hitGain = ctx.createGain();
+ hitGain.gain.value = volume * 0.3;
+ source.connect(hitGain);
+ hitGain.connect(ctx.destination);
+ source.start(ctx.currentTime + i * 0.03 + Math.random() * 0.02);
+ }
+ break;
+ }
+ case "footsteps": {
+ for (let i = 0; i < 4; i++) {
+ const bufferSize = ctx.sampleRate * 0.05;
+ const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
+ const data = buffer.getChannelData(0);
+ for (let j = 0; j < bufferSize; j++) {
+ data[j] = (Math.random() * 2 - 1) * Math.exp(-j / (ctx.sampleRate * 0.015));
+ }
+ const source = ctx.createBufferSource();
+ source.buffer = buffer;
+ const stepGain = ctx.createGain();
+ stepGain.gain.value = volume * 0.2;
+ const filter = ctx.createBiquadFilter();
+ filter.type = "lowpass";
+ filter.frequency.value = 300;
+ source.connect(filter);
+ filter.connect(stepGain);
+ stepGain.connect(ctx.destination);
+ source.start(ctx.currentTime + i * 0.4);
+ }
+ break;
+ }
+ }
+
+ addToast(`${sfx.icon} ${sfx.label}`, "info");
+ }, [volume, getAudioCtx, addToast]);
+
+ return (
+
+ {/* Volume */}
+
+ Volume
+ setVolume(parseFloat(e.target.value))}
+ className="flex-1 accent-[var(--color-gold-bright)]"
+ />
+
+ {Math.round(volume * 100)}%
+
+
+
+ {/* Ambient sounds */}
+
+
+ 🎧 Ambient Loops
+
+
+ {AMBIENT_SOUNDS.map((sound) => (
+
+ ))}
+
+
+
+ {/* Sound effects */}
+
+
+ ⚔ Sound Effects
+
+
+ {SFX_SOUNDS.map((sfx) => (
+
+ ))}
+
+
+
+ {/* Stop all */}
+ {activeAmbients.size > 0 && (
+
+ )}
+
+ {toasts.map((toast) => {
+ const style = typeStyles[toast.type];
+ return (
+
+ {style.icon}
+ {toast.message}
+
+
+ );
+ })}
+