HTML5 Audio Visualizer?

Question

Is there such a player? I'm looking into making one purely out of JavaScript. Something like http://www.nihilogic.dk/labs/pocket_full_of_html5/ but randomly all mashed together?

What are your thoughts?

Thoughts? It's premature. It will be a long, long time before something resembling the experimental Audio Data API is available as standard in browsers. — bobince, Jul 28 '10 at 12:02
The Audio Data API is functional in the latest FireFox Beta, but I agree, it will be a few years before this is standard (Even longer for cross-browser support) — JKirchartz, Sep 08 '10 at 17:44
Then you create a cool audio player plugin for diaspora and all the cool kids will have to abandon IE. We'll have world peace within a month. — einarmagnus, Sep 10 '10 at 10:37
The link is down - although the question is very old, you can see a cached version here: http://web.archive.org/web/20131003034805/http://www.nihilogic.dk/labs/pocket_full_of_html5/ — Joseph, Aug 05 '16 at 06:26

Ezeke · Answer 1 · 2013-05-21T13:43:12.910

37

2 years later and a solution is found :)

https://github.com/jsantell/dancer.js

I also stumbled upon a website which uses the audio API and three.js to create pretty nice looking visualizations: http://do.adive.in/music/

edited May 21 '13 at 13:43

answered Jul 10 '12 at 13:19

Ezeke

952
7
19

Demo doesn't work in Chrome when I try it. – Moss May 04 '13 at 08:35
Is there a working demo of this? – Ky - May 06 '13 at 19:37
http://jsantell.github.io/dancer.js/ works for me in Chrome - did you wait for it to load and clicked "Play"? – Ezeke May 08 '13 at 22:17
Wow, http://do.adive.in/music/ was pretty cool. – Ryan Aug 30 '18 at 00:15

score 22 · Answer 2 · answered Nov 09 '13 at 16:54

22

Over 3 years later and we have this: http://codepen.io/soulwire/pen/Dscga.

answered Nov 09 '13 at 16:54

Martin Harrigan

1,044
11
28

3

That is so beautiful and mesmerizing! – Keavon May 26 '14 at 23:12
3

Awesome implementation! – Vykthur D . Jun 27 '14 at 18:43
Is completely unusable on firefox – user4757174 Jun 23 '18 at 23:56

score 4 · Answer 3 · answered Sep 21 '10 at 14:37

I believe the experimental Firefox Audio API is currently the only way you can do this in HTML+Javascript, although this is far from being official HTML5. Have a read of the documentation here:

https://wiki.mozilla.org/Audio_Data_API

It includes an example of a simple spectrum analyser. I also really recommend exploring the demo links on the same page:

https://wiki.mozilla.org/Audio_Data_API#Working_Audio_Data_Demos

It's an exciting time to be a Javascript developer and I hope the other browser vendors embrace this API. We can finally get sound in all those Javascript emulators for a start!

score 1 · Answer 4 · answered Sep 14 '10 at 08:25

1

Is this the kind of visualizer you're after? http://www.storiesinflight.com/jsfft/visualizer/index.html

answered Sep 14 '10 at 08:25

tagawa

4,561
2
27
34

Not quite, but I do dig what he's got going on. – NickKampe Sep 16 '10 at 16:17

score 1 · Answer 5 · answered Sep 21 '10 at 04:53

1

This might be the answer: http://audioscene.org/scene-files/humph/slideshow/ in particular slide 6. It uses Mozilla's proposed Audio Data API which is not a W3C standard (yet) so only supported in Firefox 4.

answered Sep 21 '10 at 04:53

tagawa

4,561
2
27
34

HTML5 Audio Visualizer?

5 Answers5

Linked