How to Change Progress Color in Wavesurfer.js?

To change the color of the progress portion of an audio waveform in Wavesurfer.js, pass the progressColor option in the parameters object when calling WaveSurfer.create(). This property defines the color of the waveform from the start up to the current playhead position. You can set progressColor using any valid CSS color value, including hex codes, RGB/RGBA strings, CSS color names, or HTML canvas gradient objects.

Using Basic CSS Colors

The standard way to set the progress color is during the initialization of the Wavesurfer instance.

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#d0d0d0',
  progressColor: '#3b82f6', // Sets the played portion to a vibrant blue
  url: '/path/to/audio.mp3'
});

You can use any standard CSS color format for the progressColor property:

• Hex Codes: '#ff5500'
• RGB / RGBA: 'rgba(255, 85, 0, 0.8)'
• Named Colors: 'orange'

Applying Canvas Gradients

For a dynamic visual effect, Wavesurfer.js accepts an HTML Canvas Gradient instead of a simple string color.

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Create a linear gradient: x0, y0, x1, y1
const gradient = ctx.createLinearGradient(0, 0, 0, 150);
gradient.addColorStop(0, '#ff7e5f');
gradient.addColorStop(1, '#feb47b');

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#ccc',
  progressColor: gradient,
  url: '/path/to/audio.mp3'
});

Updating the Color Dynamically

If you need to change the progress color after the instance has already been created, use the setOptions method:

wavesurfer.setOptions({
  progressColor: '#10b981'
});