Custom soundcloud player, change waveform png colour? - soundcloud

Question

I'm creating a custom player/skin from the the soundcloud js api ( http://developers.soundcloud.com/docs/custom-player ).
All is good except I can't seem to find a way to change the colour of the waveform png (e.g. http://w1.sndcdn.com/ek9l31pY98LB_m.png )... is this even possible?
thanks
:: Ed

Answer 1

You can change the fill of the waveform in you CSS file, just locate
.sc-scrubber .sc-played {
background-color: #333;
opacity: 0.4;
}
and change the color to whatever you prefer.
Not sure if this is what you wanted though

Answer 2

You could use back-end processing (eg: for PHP, the GD or ImageMagick library) or even on the front end, use Javascript and <canvas> to recreate the waveform in whatever style you like, but as Paul said, there's no pre-packaged solution for you.

Answer 3

There is a JS library which will handle this for you: http://waveformjs.org/.
It uses a webservice to analyse the waveform, return the peaks and draw them for you, so it will only work with browsers that support Canvas.

Answer 4

Sorry, our API does not provide any mechanism for changing the waveform colour.

Answer 5

Yes, this is definitely possible.
As others have suggested about using a server-side script to re-colour it, I have built a solution that does the following:
use javascript to listen to the onPlayerTrackSwitch.scPlayer event emitted by soundcloud player when the track changes.
grab the URL of the waveform's img src
replace the waveform img src with a URI of a custom PHP script on your server.
The custom PHP script takes the original waveform image url as well as RGB colour values and uses the GD image library to load it and re-colour it.
The PHP script finally renders the re-coloured image with the Content-Type: image/png header.
Full Example: https://snipt.net/plong0/custom-soundcloud-waveform-png/