How to Set Waveform Canvas Height in Wavesurfer.js?

Wavesurfer.js uses the height configuration option to control the height of the waveform canvas. When initializing the WaveSurfer instance, setting this option determines the canvas height in pixels, allowing you to customize how tall or compact the audio visualizer appears on your webpage.

Using the height Option

When creating a new instance of Wavesurfer.js using WaveSurfer.create(), you pass an options object containing your preferred settings. The height property accepts a number (representing pixels) or specific string values depending on the version of Wavesurfer.js you are using.

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F46E5',
  progressColor: '#818CF8',
  height: 128 // Sets the waveform height to 128 pixels
});

Additional Height Behavior in Wavesurfer.js v7

In the latest versions of Wavesurfer.js (v7 and newer), the height option offers additional flexibility:

  • Numeric Value: Passing an integer such as height: 100 sets the height directly to 100 pixels.
  • Responsive Height: If you pass 'auto', Wavesurfer.js dynamically fills the height of its parent container.
  • Dynamic Updating: You can change the canvas height after initialization using the setOptions method:
wavesurfer.setOptions({
  height: 200
});