Wavesurfer.js: Gradient for progressColor?

Created on 25 Mar 2015 · 3Comments · Source: katspaugh/wavesurfer.js

Is it possible to render a gradient for the progressColor?

Source

joshsmith

Most helpful comment

Yes, it's actually working. Use this code:

var linGrad = document.createElement('canvas').getContext('2d').createLinearGradient(0, 0, 1000, 128);
linGrad.addColorStop(0, '#8ED6FF'); 
linGrad.addColorStop(1, '#004CB3');

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  progressColor: linGrad
});

See live demo here: http://plnkr.co/edit/L99eTSvAkuVJDOXtdCDu?p=preview

katspaugh on 10 Apr 2015

❤3 👍3

All 3 comments

Naively I'm going to say this is possible to do with https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient

joshsmith on 25 Mar 2015

It might be possible to pass a Canvas gradient object as progressColor, but I'm not sure. Try it.

katspaugh on 25 Mar 2015

Yes, it's actually working. Use this code:

var linGrad = document.createElement('canvas').getContext('2d').createLinearGradient(0, 0, 1000, 128);
linGrad.addColorStop(0, '#8ED6FF'); 
linGrad.addColorStop(1, '#004CB3');

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  progressColor: linGrad
});

See live demo here: http://plnkr.co/edit/L99eTSvAkuVJDOXtdCDu?p=preview

katspaugh on 10 Apr 2015

❤3 👍3

Was this page helpful?

0 / 5 - 0 ratings