Tibor SzászAz élmény, ami számít

Customizing the SoundCloud waveform image

For the last months, I'm using SoundCloud's API to create an application. I had several issues, that I managed to solve, and this one I'm going to show you is one of my favorite. The waveform that soundcloud generates for a song, looks like the one I attached to the post.
It's not bad, as long as you can integrate the gray mask with your application design. If you can't then you can start to scratch your head. I did. :)

The solution I came up with is simple: put the waveform on a canvas, then process the image to fit my design. Fortunately, there is a great canvas image manipulation library, called Pixastic. It was created by Jacob Seidelin (aka. Nihilogic) and it has several filters, in my case the brightness filter did the job.
If you are familiar with Photoshop, you can imagine how easy it is to reduce some brightness and add some contrast to achieve some image enhancement.
Pixastic does it in a very fast way. Here is a sample code how can you use it:

var renderWaveform = function( waveformURL )
{
	var img = new Image();
	img.src = waveformURL;

	img.onload = function()
	{
		var ctx = $('#waveform')[0].getContext('2d');

		var gradient = ctx.createLinearGradient(0, 0, 0, 30);
		gradient.addColorStop(0, '#ccc'); 
		gradient.addColorStop(1, '#000');
		ctx.fillStyle = gradient;

		// Draw background
		ctx.fillRect( 0, 0, 210, 30 );

		ctx.drawImage( img, 0, 0, 210, 30 );

		Pixastic.process( $('#waveform')[0], "brightness", {brightness:-33,contrast:0.5});
	}
}

Latom addig piszkaltalak, mig megoldottad ezt a dolgot! :) IE8 alatt egyebkent csak a narancssarga poziciojelzo jelenik meg a lejatszon. :(

El is felejtettem, hogy ezt beszéltük, de valóban, megérte :D

Good morning Tabot,
We need a chart player as yours above for webradio to trasnmit events in Rio de Janeiro in 2-3 months.

Do you have any solution for unlimited songs at all, we like of cloudychats, but it seems a solution for a limited number of musics.


Regards

Can you please explain how this manipulated image is used? Are you displaying it on your own website, or replacing the one used by Soundcloud?

I used the manipulated waveform for a custom SoundCloud player on my own site, cloudycharts.com it seems to be broken now, I'll fix it some time.

I had to write a simple proxy script that downloaded the track's waveform image and displayed it, because the canvas element cannot work in a cross domain way. The conversion was done on the fly.