Soundboard

\n Edit a label and press Enter (or click outside) to generate the sound effect. Then click the tile to play.\n

\n \n\n\n",[132],"b82f27b6-5a1f-11f1-97bc-ee650bb23af1","client.js","019e6baa-1a85-738f-b601-a44321d10705",["D",1779922770504],"script","const DEFAULTS = [\n \"applause\", \"thunder clap\", \"laser zap\", \"explosion\",\n \"cat meow\", \"horn honk\", \"wind chimes\", \"drum roll\",\n \"rain on window\", \"crowd cheer\", \"ding\", \"boing\",\n \"fire crackle\", \"wolf howl\", \"bell ring\", \"swoosh\",\n];\n\nconst grid = document.getElementById(\"grid\");\nDEFAULTS.forEach((label) => grid.appendChild(createTile(label).el));\n\nfunction createTile(initialLabel) {\n const state = {\n label: initialLabel,\n audioUrl: null,\n loading: false,\n error: null,\n generatedFor: null,\n };\n\n const el = document.createElement(\"div\");\n el.className = \"rounded-lg border border-slate-700 bg-slate-800 p-3 flex flex-col gap-2 transition\";\n\n const input = document.createElement(\"input\");\n input.value = initialLabel;\n input.className = \"bg-slate-900 border border-slate-700 rounded px-2 py-1 text-sm focus:outline-none focus:border-indigo-500 disabled:cursor-not-allowed\";\n input.addEventListener(\"input\", (e) => { state.label = e.target.value; });\n input.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\") { e.preventDefault(); input.blur(); }\n });\n input.addEventListener(\"blur\", () => commit());\n\n const audio = new Audio();\n\n const btn = document.createElement(\"button\");\n btn.className = \"rounded px-3 py-4 font-medium text-sm transition\";\n btn.addEventListener(\"click\", () => {\n if (state.audioUrl && !state.loading) {\n audio.pause();\n audio.currentTime = 0;\n audio.play();\n }\n });\n\n const errEl = document.createElement(\"p\");\n errEl.className = \"text-xs text-red-400 hidden break-words\";\n\n el.append(input, btn, errEl);\n\n function applyState() {\n el.classList.toggle(\"opacity-50\", state.loading);\n input.disabled = state.loading;\n btn.disabled = state.loading || !state.audioUrl;\n\n const ready = state.audioUrl && !state.loading;\n btn.className = \"rounded px-3 py-4 font-medium text-sm transition \" + (\n ready ? \"bg-indigo-600 hover:bg-indigo-500 text-white cursor-pointer\" :\n state.loading ? \"bg-slate-700 text-slate-400 cursor-wait\" :\n \"bg-slate-700 text-slate-500 cursor-not-allowed\"\n );\n btn.textContent = state.loading\n ? \"Generating…\"\n : state.audioUrl\n ? \"▶ Play\"\n : \"Press Enter to generate\";\n\n if (state.error) {\n errEl.textContent = state.error;\n errEl.title = state.error;\n errEl.classList.remove(\"hidden\");\n } else {\n errEl.classList.add(\"hidden\");\n }\n }\n\n async function commit() {\n const text = state.label.trim();\n if (!text || text === state.generatedFor) return;\n state.loading = true;\n state.error = null;\n applyState();\n try {\n const r = await fetch(\"/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text }),\n });\n const ct = r.headers.get(\"content-type\") || \"\";\n if (ct.includes(\"application/json\")) {\n const j = await r.json();\n throw new Error(j.error || `Failed (${r.status})`);\n }\n if (!r.ok) throw new Error(`Failed (${r.status})`);\n const blob = await r.blob();\n if (state.audioUrl) URL.revokeObjectURL(state.audioUrl);\n state.audioUrl = URL.createObjectURL(blob);\n audio.src = state.audioUrl;\n state.generatedFor = text;\n } catch (e) {\n state.error = e.message || \"Failed\";\n } finally {\n state.loading = false;\n applyState();\n }\n }\n\n applyState();\n return { el, state };\n}\n",[138],"pulls","branches","forks","envVars",{"_151":121,"_153":121},"connections",{"_151":41,"_152":41},"count","unfilledCount","emptyCount",{"_18":137,"_20":138,"_117":139,"_118":-5,"_119":70,"_120":121,"_122":37,"_22":164,"_67":41,"_124":141,"_126":142,"_128":26,"_129":-5,"_158":165,"_90":166},{"_18":131,"_20":132,"_117":133,"_118":-5,"_119":70,"_120":68,"_122":37,"_22":161,"_67":121,"_124":101,"_126":135,"_128":26,"_129":-5,"_158":162,"_90":163},{"_18":115,"_20":116,"_117":35,"_118":-5,"_119":70,"_120":121,"_122":37,"_22":157,"_67":41,"_124":125,"_126":127,"_128":26,"_129":-5,"_158":159,"_90":160},["D",1779922770504],"children",[],[116],["D",1780071354247],[],[132],["D",1779922770504],[],[138],["D",1779922770504],["D",1789509672838],{"_16":17,"_88":84},{"_16":17,"_81":82,"_83":84,"_32":33,"_85":86,"_87":26},{"_67":68,"_20":69,"_18":70,"_71":19,"_72":-5,"_73":-5,"_74":75,"_76":77,"_78":43,"_79":21,"_80":17},"ctx",{"_60":-5,"_109":205,"_206":207,"_208":209,"_210":26,"_211":26,"_212":26,"_213":37,"_214":-5,"_215":-7,"_216":-7,"_217":41,"_218":26,"_219":26,"_220":-5,"_221":26,"_222":26,"_223":26,"_224":-5},"ENV",{"_176":177,"_178":179,"_180":69,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search