Waveform
Canvas-based audio waveform visualization for DAW interfaces. Displays AudioBuffer data with playhead, selection, and loop regions.
Basic Waveform
Simple waveform display with a sine wave.
With Playhead & Playback
Click play to see the playhead animate. Click on the waveform to seek.
Position: 0%
Sizes
Waveforms come in three sizes.
Small (60px)
Medium (80px)
Large (120px)
Display Modes
Different visualization modes for mono and stereo audio.
Mono (mirrored)
Mono (single-sided)
Stereo (overlaid)
Stereo (split channels)
Custom Colors
Customize waveform colors for different contexts.
Loop Region
Display a highlighted loop region on the waveform.
Loop region: 20% - 60%
Selection Region
Highlight a selected region of the waveform.
Complex Waveform
A more complex waveform with multiple harmonics.
Fixed Width
Waveform can have a fixed width instead of filling container.
Center Line
Toggle the center line visibility.
With center line
Without center line
Empty State
What the waveform looks like with no audio loaded.
Interactions
Waveform interaction capabilities.
Click to Seek
- Click on waveform - Seek to position (when clickToSeek enabled)
- onClick callback - Receives sample position
Display Options
- displayMode - mono, stereo, or split
- mirrored - Mirror waveform around center line
- normalize - Normalize peaks to full height
- channel - left, right, or mix
Regions
- playheadPosition - Current playhead in samples
- selection - Selected region (start, end in samples)
- loopRegion - Loop markers (start, end in samples)