I’m creating a web application that uses the SoundCloud API to stream tracks of artists. I know how I can get the waveform PNG image (http://w1.sndcdn.com/fxguEjG4ax6B_m.png for example), but I actually need some sort of wave-data (when in the song is it high and when is it low?).
I don’t have access to an audio library like LAME or something like that, because my web hosting doesn’t allow it. Is it possible to
- Get this data directly from the SoundCloud API in some way.
- Process the waveform PNG image in PHP or JavaScript to retrieve the needed data? (And is there maybe some sort of library available for this kind of processing?)
It’s possible to parse the waveform PNG image to translate it to an array of points. The images are vertically symmetrical and to find the peaks you only need to inspect the alpha values to count how many opaque pixels it is from the top of the image. This is how the waveforms are rendered for the widget and on the Next SoundCloud.
In PHP, you could use ImageMagick or the GD Graphics Library to read these values, and in Javascript, it’s possible by putting the image onto a canvas object and then inspecting the image data from there. I won’t go too much into the details of these, but you could certainly ask another question if you get stuck.