Waveform

Interactive waveform visualization with seek and chapter markers.

audio

Preview

Props & interactive options

Prop	Type	Default	Description	Try it
show_waveform	url param	1	Display waveform visualization.

Documentation

Render the audio waveform from peaks data. Click anywhere on the waveform to seek. Chapter markers and buffered regions are shown directly on the waveform. Falls back to a standard progress bar when waveform data is unavailable.

Code

<iframe
  id="videas-019dcfae-f45e-74ab-b9e5-95717151c5b7"
  src="https://app.videas.com/embed/019dcfae-f45e-74ab-b9e5-95717151c5b7/?show_waveform=1"
  width="100%" height="200"
  frameborder="0" allowfullscreen
></iframe>
<script>
window.addEventListener('message', function(e) {
  if (e.data && e.data.type === 'videas:embed:resize') {
    var f = document.getElementById('videas-' + e.data.embedId);
    if (f) f.style.height = e.data.height + 'px';
  }
});
</script>

Frequently asked questions

Where does the waveform data come from?

Videas computes a peaks file during ingestion by sampling the audio amplitude at regular intervals. The resulting JSON is lightweight (a few KB) and delivered alongside the track, so the waveform renders instantly without re-decoding the full audio client-side.

What happens if peaks data isn't available yet?

The player falls back to a standard linear progress bar. As soon as the peaks file is generated (or if you disable the waveform via <code>show_waveform=0</code>), you get a classic and accessible experience — nothing blocks playback.

Can I show chapter markers on the waveform?

Yes — when chapters are defined, vertical markers are drawn on the waveform at each chapter start, giving listeners a visual map of the track they can click to seek.