开发者

Soundcloud (javaScript) custom player create spectrum analyzer

开发者 https://www.devze.com 2023-03-04 04:57 出处:网络
I\'m implementing the开发者_StackOverflow中文版 Soundcloud custom player ( https://github.com/soundcloud/soundcloud-custom-player ) on my site.

I'm implementing the开发者_StackOverflow中文版 Soundcloud custom player ( https://github.com/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.upcoming-djs.com

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.


Added my comment 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.com/audio/ (Chrome only)

Source is un-minified, but not particularly well commented. 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

Soundcloud (javaScript) custom player create spectrum analyzer


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


I wrote a article about this, if you are interested. http://www.flobii-cc.com/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)

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号