Playground component

Peaks.js waveform

Map audio to zoomable waveforms, wire precomputed data, and keep layout stable with explicit containers.

Read the guide Back to playground

Preview

Zoom + overview waveform layout.

This mock layout mirrors the container structure Peaks.js expects. Replace the sample bars with live Peaks.js canvases.

Zoom view Loading Peaks.js

Waveform is initializing.

Overview Always-on context

Waiting for overview data.

Audio preview

Data pipeline

Generate waveform data with `audiowaveform -b 8`.
Serve `.dat` files through `static/` or a CDN.
Use `dataUri` for precomputed data, `webAudio` for short clips.

Lifecycle safety

Initialize Peaks.js in `onMount` to avoid SSR errors.
Call `instance.destroy()` when the route unmounts.
Keep zoom levels and cache tuned for your UX.

Config snapshot

webAudio: onzoomLevels: 4waveformCache: on

Peaks.init({
  zoomview: { container: zoomview },
  overview: { container: overview },
  mediaElement: audioEl,
  webAudio: { audioContext },
  zoomLevels: [512, 1024, 2048, 4096]
});

Next step

Ship your waveform data.

Generate `.dat` files for production audio and point Peaks.js at your cached endpoints.

Browse guides