How to Set the Unplayed Waveform Color in Wavesurfer.js?

In Wavesurfer.js, the waveColor configuration option determines the color of the unplayed portion of the audio waveform. By passing a valid CSS color string—such as a hex code, RGB value, or named color—to this parameter during initialization, developers can fully customize the visual appearance of audio tracks before playback reaches them.

Wavesurfer.js is a popular open-source JavaScript library used to generate interactive, customizable audio waveforms in web applications using the Web Audio API and HTML5 Canvas. When instantiating a new Wavesurfer instance, the configuration object accepts several visual parameters to control how the waveform renders on screen.

To customize the unplayed section, set the waveColor property inside the initialization object:

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F46E5', // Color of the unplayed waveform
  progressColor: '#06B6D4', // Color of the played waveform
  cursorColor: '#333333'
});

The parameter accepts any standard CSS color format:

  • Hex Codes: #4F46E5 or #333
  • RGB / RGBA: rgb(79, 70, 229) or rgba(79, 70, 229, 0.5)
  • Named Colors: violet, blue, or gray
  • Gradients: A HTMLCanvasElement canvas gradient object can also be passed for dynamic color fades.

To modify the waveform color dynamically after initialization, use the setOptions method:

wavesurfer.setOptions({
  waveColor: '#22C55E'
});

Using waveColor alongside progressColor allows for clear visual feedback, giving users an intuitive sense of playback progress across the audio timeline.