Question

I’m trying to build an mp3 player for my site using JavaScript (and any plugins/frameworks(jQuery)/libraries that are relevant) & html5. So I built the player (more accurately, I implemented jPlayer), and now I want to make a visualizer.

Ok maybe it’s not a visualizer (all the names for ways to visualize sound always confused me), I guess what I want is something like this:

_{(source: anthonymattox.com)}

Or just something that graphs the amplitude (loudness) of an MP3.

So to start, does anyone know an API that can do this?

If you don’t that’s ok; I guess I’ll build my own. For which I need to know:

Does anybody know a way to get the amplitude/loudness of an mp3 at any given point using JavaScript?

EDIT

Changed to a question about php: Visualization of MP3 – PHP

Answer 1

You would need to be able to decode the MP3 yourself. The html5 audio element, and the browsers’s implementations of it, don’t expose this sort of data. For example, look at Firefox’s exposed methods for JavaScript. The closest thing to what you want is the “volumechange” event. But that is in reference to the volume mixer on the browser’s rendered control (i.e. output volume). It has nothing to do with the actual dB of the audio source.

I imagine that the only feasible way to do this is to render your waveform to a graphic ahead of time, and then “reveal” it as the song plays (e.g. with the “timeupdate” event).