Multi-Track Audio Recording
Record audio directly in the browser with real-time waveform visualization. Layer multiple tracks by recording or importing audio files, then export the mix as WAV.
About This Example
This example uses the useIntegratedRecording hook from @waveform-playlist/recording to capture microphone audio via an AudioWorklet. Audio is processed in a dedicated thread to avoid blocking the main thread, and peaks are generated in real time for a live waveform preview as you record.
Features
- Live waveform preview — see your audio rendered in real time as you record, powered by AudioWorklet peak generation
- Multi-track layering — record multiple takes on separate tracks and play them back together
- Mono and stereo recording — channel count is auto-detected from your microphone
- Drag-and-drop import — drop audio files (WAV, MP3, FLAC, etc.) onto the timeline to add backing tracks
- VU meter — real-time input level monitoring with peak hold indicator
- Device selection — choose between available microphones without restarting
- Smart recording position — recording starts from the cursor or the end of the last clip, whichever is later
- Auto-scroll — the timeline scrolls to keep the recording head in view
- WAV export — export your multitrack mix as a WAV file, entirely client-side
How It Works
The recording pipeline uses the Web Audio API's AudioWorkletNode connected to a MediaStreamSource from getUserMedia. The worklet buffers raw PCM samples and sends them to the main thread at ~60fps intervals. On the main thread, peaks are incrementally appended and rendered via HTML Canvas — the same rendering pipeline used for loaded audio files. When recording stops, the accumulated samples are assembled into an AudioBuffer and added as a clip on the selected track.
