Click any sound button to begin • WebGPU visualization
Web Audio + WebGPU Catalog
Interactive educational sound & music demo
1. HTML <audio> Element
Classic way to play audio files. Simple but less flexible for real-time synthesis.
2. Oscillators (Web Audio API)
Core building blocks of synthesis. Four basic waveforms.
3. Filters & Effects
Shape the sound with BiquadFilter, Delay, and Gain nodes.
4. Sample / Buffer Playback
Load or generate AudioBuffers (the way most sample-based music works).
4b. Healing & Memorable Sequences
20 pleasant sequences using frequencies many people find calming or uplifting (Solfeggio, 432 Hz, 528 Hz, etc.).
5. Analyser + WebGPU Visualization
Frequency & time-domain data from AnalyserNode drives the WebGPU canvas in real time. Note: The canvas always runs. This button only starts/stops the quiet audio drone that feeds the visualizer. When stopped the rings become much darker.
Instructions
• Click any button or choose a sequence to hear it.
• The WebGPU canvas reacts to the live audio signal.
• On mobile: tap ☰ to open this panel, ✕ to close.
• Best in latest Chrome / Edge (WebGPU + Web Audio required).
Free educational demo.
Visit webcentive.com for more interactive experiments.
Screenshots & free personal use welcome.
Please do not copy the source code wholesale.