I'm implementing the Soundcloud custom player ( ) on my site.

I would like to create a spectrum analyzer which moves based on the sound.

I really don't have any idea as to where to start or if it even is possible at all.

Please check out my site to see what I mean:

At the right side you see the player and when you click on play it starts playing and the equalizer starts moving.

This is currently a fake effect, but I want it to move with the sound.

All suggestions and/or help is of course much appreciated.

I'm implementing the Soundcloud custom player ( https://github./soundcloud/soundcloud-custom-player ) on my site.

I would like to create a spectrum analyzer which moves based on the sound.

I really don't have any idea as to where to start or if it even is possible at all.

Please check out my site to see what I mean: http://dev.uping-djs.

At the right side you see the player and when you click on play it starts playing and the equalizer starts moving.

This is currently a fake effect, but I want it to move with the sound.

All suggestions and/or help is of course much appreciated.

• javascript
• audio-player
• equalizer

• 1 You might want to look into the HTML5 Audio Data API. Other than that, you're going to need Flash if you want a legit spectrum analyzer (which, by the way, is what you're asking for. not an equalizer). – Kevin Ennis Commented May 7, 2011 at 17:07
• @kennis: Thanks that's what I mean indeed :) Changed it. – PeeHaa Commented May 7, 2011 at 17:09
• @kennis, you should put that in an answer not a ment. Don't forget to mention the implementation of an fft, I deleted my anwser. – mikerobi Commented May 7, 2011 at 17:13
• I deleted the jQuery tag (twice) because it isn't relevant to the question or the answer. You don't even mention it in the question. Even if you mentioned it, in this context it would be like saying: "I have 6 bananas and I need grill a steak." – mikerobi 44 secs ago – mikerobi Commented May 7, 2011 at 17:14
• 1 I thought about it. But really, there's no solution for this particular problem unless the OP is willing to ditch the soundcloud player altogether. HTML5 isn't going to be able to interface with a Flash widget. – Kevin Ennis Commented May 7, 2011 at 17:16

4 Answers 4

Added my ment as an answer:

You might want to look into the HTML5 Audio Data API. Other than that, you're going to need Flash if you want a legit spectrum analyzer (which, by the way, is what you're asking for. not an equalizer).

Edit:

For anyone interested, I have a quick and dirty demo here: http://kevincennis./audio/ (Chrome only)

Source is un-minified, but not particularly well mented. Feel free to steal whatever you want.

The simple answer is this can not be done just using javascript.

Your options are to use to a plugin like flash which has a extensive audio API and is installed on a large percentage of web users browsers as a plugin or to look into the experimental HTML5 audio API.

hope this helps

Sound manager 2

Take a look at
http://www.schillmania./projects/soundmanager2/demo/360-player/canvas-visualization.html#hifi=1

I wrote a article about this, if you are interested. http://www.flobii-cc./2011/04/simple-fft-web-visualization.html

I used the SoundManager2- API ( need flash) to get the spectrum data and HTML5 Canvas to visualize them.

(The HTML5 Audio API is limited to only a few browsers)