/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const BASE_NOTES = { "C": 261.63, "E": 329.63, "G": 392.00, }; const BELL_COLORS = ["#FFD700", "#FF6347", "#4169E1"]; const GRID_SIZE = 8; function App() { const [audioEnabled, setAudioEnabled] = useState(false); const [audioState, setAudioState] = useState("Initializing"); const [grids, setGrids] = useState({ C: Array(GRID_SIZE).fill(false), E: Array(GRID_SIZE).fill(false), G: Array(GRID_SIZE).fill(false), }); const [octaves, setOctaves] = useState({ C: 4, E: 4, G: 4, }); const [isPlaying, setIsPlaying] = useState(false); const [currentBeat, setCurrentBeat] = useState(0); const [noteInterval, setNoteInterval] = useState(250); const audioContextRef = useRef(null); const reverbRef = useRef(null); const playbackIntervalRef = useRef(null); const initAudio = () => { if (audioContextRef.current) { audioContextRef.current.close(); } try { audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)(); audioContextRef.current.resume().then(() => { console.log("AudioContext resumed successfully"); setAudioState("Ready"); }); setAudioEnabled(true); console.log("Audio context initialized"); reverbRef.current = audioContextRef.current.createConvolver(); const impulseLength = 2 * audioContextRef.current.sampleRate; const impulse = audioContextRef.current.createBuffer(2, impulseLength, audioContextRef.current.sampleRate); const impulseL = impulse.getChannelData(0); const impulseR = impulse.getChannelData(1); for (let i = 0; i < impulseLength; i++) { impulseL[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / impulseLength, 2); impulseR[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / impulseLength, 2); } reverbRef.current.buffer = impulse; } catch (error) { console.error("Failed to initialize audio context:", error); setAudioState("Error"); setAudioEnabled(false); } }; const playBell = (note) => { if (!audioContextRef.current) { console.warn("Audio context not initialized. Initializing now."); return; } if (!audioEnabled) { console.warn("Audio is not enabled. Skipping playBell."); return; } const frequency = BASE_NOTES[note] * Math.pow(2, octaves[note] - 4); audioContextRef.current.resume().then(() => { console.log("AudioContext resumed before playing bell"); const ctx = audioContextRef.current; const mainGain = ctx.createGain(); mainGain.connect(reverbRef.current); reverbRef.current.connect(ctx.destination); const dryGain = ctx.createGain(); dryGain.connect(ctx.destination); const bellHarmonics = [ { freq: 1, gain: 1.00 }, { freq: 2, gain: 0.60 }, { freq: 3, gain: 0.40 }, { freq: 4.2, gain: 0.25 }, { freq: 5.4, gain: 0.15 }, { freq: 6.8, gain: 0.10 }, ]; bellHarmonics.forEach(harmonic => { const oscillator = ctx.createOscillator(); const oscGain = ctx.createGain(); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(frequency * harmonic.freq, ctx.currentTime); oscGain.gain.setValueAtTime(harmonic.gain, ctx.currentTime); oscGain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 2); oscillator.connect(oscGain); oscGain.connect(mainGain); oscGain.connect(dryGain); oscillator.start(ctx.currentTime); oscillator.stop(ctx.currentTime + 2); }); const volume = 0.5; const attackTime = 0.001; const decayTime = 1.5; mainGain.gain.setValueAtTime(0, ctx.currentTime); mainGain.gain.linearRampToValueAtTime(volume * 0.7, ctx.currentTime + attackTime); mainGain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + attackTime + decayTime); dryGain.gain.setValueAtTime(0, ctx.currentTime); dryGain.gain.linearRampToValueAtTime(volume * 0.3, ctx.currentTime + attackTime); dryGain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + attackTime + decayTime); console.log(`Bell played: ${note}${octaves[note]} (${frequency.toFixed(2)}Hz)`); }).catch(error => { console.error("Failed to resume AudioContext:", error); setAudioState("Error"); }); }; const toggleGridCell = (note, index) => { setGrids(prev => ({ ...prev, [note]: prev[note].map((cell, i) => i === index ? !cell : cell) })); }; const changeOctave = (note, delta) => { setOctaves(prev => ({ ...prev, [note]: Math.max(0, Math.min(8, prev[note] + delta)) })); }; const togglePlayback = () => { setIsPlaying(prev => !prev); }; const refreshSequencer = () => { setIsPlaying(false); setGrids({ C: Array(GRID_SIZE).fill(false), E: Array(GRID_SIZE).fill(false), G: Array(GRID_SIZE).fill(false), }); setOctaves({ C: 4, E: 4, G: 4, }); setCurrentBeat(0); initAudio(); }; useEffect(() => { initAudio(); }, []); useEffect(() => { if (isPlaying) { playbackIntervalRef.current = setInterval(() => { setCurrentBeat(prev => (prev + 1) % GRID_SIZE); Object.entries(grids).forEach(([note, grid]) => { if (grid[currentBeat]) { playBell(note); } }); }, noteInterval); } else { clearInterval(playbackIntervalRef.current); } return () => clearInterval(playbackIntervalRef.current); }, [isPlaying, grids, noteInterval, currentBeat, octaves]); return (

🔔 Bell Sequencer 🔔

Audio State: {audioState}

{Object.entries(grids).map(([note, grid], noteIndex) => (

{note}{octaves[note]}

{grid.map((cell, index) => ( ))}

))}

Speed: {1000 / noteInterval} beats/second setNoteInterval(Number(e.target.value))} />

Ring the source on Val Town 🔔

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Bell Sequencer

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: 'Roboto', sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1, h2 { color: #333; margin-bottom: 20px; } .audio-state { margin-bottom: 20px; font-weight: bold; } .init-audio-button { margin-left: 10px; padding: 5px 10px; background-color: #4ecdc4; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } .init-audio-button:hover { background-color: #45b7aa; } .grids { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; } .grid { background-color: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .octave-buttons { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; } .octave-button { padding: 5px 10px; font-size: 16px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } .octave-button:hover { background-color: #e0e0e0; } .grid-cells { display: grid; grid-template-rows: repeat(8, 1fr); gap: 10px; } .grid-cell { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #ccc; background-color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: all 0.3s ease; } .grid-cell.active { border-color: currentColor; } .grid-cell.current { box-shadow: 0 0 0 2px #333; } .controls { margin-bottom: 20px; } .playback-button, .refresh-button { padding: 10px 20px; font-size: 18px; color: white; border: none; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; margin: 0 10px 20px; } .playback-button { background-color: #4ecdc4; } .refresh-button { background-color: #f7b731; } .playback-button:hover, .refresh-button:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .playback-button:hover { background-color: #45b7aa; } .refresh-button:hover { background-color: #e5a82e; } .slider-container { display: flex; flex-direction: column; align-items: center; margin-top: 20px; } .slider-container label { margin-bottom: 10px; } input[type="range"] { width: 100%; max-width: 300px; } .footer { margin-top: 30px; font-size: 14px; color: #666; } .footer a { color: #4ecdc4; text-decoration: none; } .footer a:hover { text-decoration: underline; } `;

bellTracker