Soundcloud waveform nodes

I was reading a article on soundcloud today about their waveforms and how they generate them by converting the highest volume point into a INT between 0 - 1.

After that I opened the console on chrome and then a track on Soundcloud, going through the networks tab (all files) there was no file returning a array of data to generate the html5 waveform, so my question is how do they do it without requesting the data?

Solution

As far as i understand this process.

SoundCloud creates an image directly after the upload.

You can access it via the tracks endpoint.

SC.get('/tracks/159966669', function(sound) {
$('#result').append('<img src="' +sound.waveform_url+'"/>' );
});

I.e. http://jsfiddle.net/iambnz/fzm4mckd/

Then they use a script like that, written by (former) SoundCloud devs, http://waveformjs.org - which converts the image into floats.

Example call:

http://www.waveformjs.org/w?url=https%3A%2F%2Fw1.sndcdn.com%2FzVjqZOwCm71W_m.png&callback=callback_json1

Example response (extract)

callback_json1([0.07142857142857142,0.5428571428571428,0.7857142857142857,0.65,0.6142857142857143,0.6357142857142857,0.5428571428571428,0.6214285714285714,0.6357142857142857,0.6571428571428571,0.6214285714285714,0.5285714285714286,0.6642857142857143,0.5714285714285714,0.5,0.5,0.6,0.4857142857142857,0.4785714285714286,0.5714285714285714,0.6642857142857143,0.6071428571428571,0.6285714285714286,0.5928571428571429,0.6357142857142857,0.6428571428571429,0.5357142857142857,0.65,0.5857142857142857,0.5285714285714286,0.55,0.6071428571428571,0.65,0.6142857142857143,0.5928571428571429,0.6428571428571429,...[....]

See example here, more detailed on waveform.js

HTML

<div class="example-waveform" id="example2">
<canvas width="550" height="50"></canvas>
</div>

SC.get('/tracks/159966669', function(sound) {
  var waveform = new Waveform({
    container: document.getElementById("example2"),
    innerColor: "#666666"
  });
  waveform.dataFromSoundCloudTrack(sound);
});

http://jsfiddle.net/iambnz/ro1481ga/

See docs here: http://waveformjs.org/#endpoint

I hope this will help you a bit.