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).

5. Analyser + WebGPU Visualization

Frequency & time-domain data from AnalyserNode drives the WebGPU canvas in real time.

Instructions

• Click any button to hear the corresponding technique.
• 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.