How To: Create Waveform Visualizations

Problem: You want to visualize audio with a waveform that synchronizes with playback.

Solution: Pair an audio element with a waveform element using the target attribute.

Configure FFT properties for different styles:

• Higher granularity: Increase fft-size (must be power of 2, e.g., 128, 256, 512, 1024)
• More frequency bins = more waveform detail, but higher CPU cost
• Use mode="bars" on ef-waveform for a bar chart style, mode="wave" for a continuous curve

For deeper understanding of how audio analysis works, see Audio Analysis in the concepts doc.