Skip to content
WaveformPlayer

Quick start

From markup

Section titled “From markup”

After adding the script and stylesheet, drop a div with data-waveform-player and a data-url:

<div
  data-waveform-player
  data-url="/audio/track.mp3"
  data-title="Midnight Dreams"
  data-artist="The Wavelength"
  data-waveform-style="mirror"
  data-height="64"
></div>

That is a complete, working player — play button, seekable waveform, time and title. Everything else is optional configuration. Here it is, live:

From JavaScript

Section titled “From JavaScript”

The same options work on the constructor (camelCase instead of data-*):

import { WaveformPlayer } from '@arraypress/waveform-player';


const player = new WaveformPlayer(document.querySelector('#player'), {
  url: '/audio/track.mp3',
  title: 'Midnight Dreams',
  waveformStyle: 'mirror',
  height: 64,
});


player.play();

What’s next

Section titled “What’s next”