API Blog | March 16th, 2012 Announcements Wave64 BETA By leemartin

Wave64 BETA

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! Here's how it works:

 

Endpoint

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. Here's a very basic example.

$.getJSON('http://wave64.it/w?callback=?', { url: waveform_url }, (data) {
  waveform = new Image();
  waveform.src = data.data;
  waveform.onload = function() {
    // now you can access the waveform via canvas
  };
});

 

Plugin

In addition to the Wave64 endpoint, we're also providing a jQuery plugin that can color any grey 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.

Here's a full working example of the plugin in action on Github.

 

Feedback

Found a bug, let us know on the Github Issues page or fork the project yourself. If you've got a suggestion or used Wave64 on one of your projects: Please, let me know @leemartin or at lee@soundcloud.com.

Categories