Wave64 Beta

Wave64 adds cross-domain SoundCloud waveform image support for your HTML5 canvas hacks.


If you've developed with HTML5 canvas before, you know that accessing and manipulating images from different domains or origins is prohibited. However, a quick search will present several ways of dealing with this problem. One of these solutions is a simple jQuery plugin called $.getImageData developed by @maxnovakovic. A proxy server converts the image into a base64 encoded data URL and returns the image as a JSON object. The image can then be included and edited within canvas. Magic? You know it.

So what's Wave64? It's a slimmed down version of this idea made specifically for you: SoundCloud developer! We've open-sourced and hosted it right here for your hacking needs. Hell, even I'm using it to build the next version of Stratus... so, how do you use it?


Wave64 exists as a single endpoint you pass a SoundCloud waveform url and callback to (preferably via jQuery.) It will return a JSON object you can manipulate in canvas. Check it out:

$.wave64 Plugin

In addition to the Wave64 endpoint, we're also providing a jQuery plugin that can color any SoundCloud waveform image using canvas. Simply call the provided $.wave64() function passing a waveform url, height, width, color (in RGB array format), and callback. The callback will receive a recolored and resized canvas ready image.

Don't believe me? Here's a full working example using the SoundCloud JS SDK:


Got a suggestion? Found a bug? Using Wave64 on your project? Let me know @leemartin