4 ms·

Dancer.js - A high-level audio API with sweet visualizations

52 points by jetcom 14y ago

pella 14y ago
http://news.ycombinator.com/item?id=4074187 http://news.ycombinator.com/item?id=4074187
rpwverheij 14y ago
very nice. good to see this as an open js library which uses canvas. seeing these kind of visualisations always makes me wonder though... is the amplitude of the spectrum all the info we can obtain and use for visualisation? How difficult would it be to make an api that can detect the different types of sound in a sample and put out different data streams for each?
- mdpane 14y ago
  fuck you, I'm not making enough money to care too deeply about this
- jsantell 14y ago
  that would be.. tricky. almost impossible to generalize, I'd imagine, but who knows
city41 14y ago
I'm curious how he was able to synchronize to the audio. I have found with at least Chrome on OSX, the audio tag's callbacks have a varying delay with the audio. Seems to be at the OS level and beyond Chrome's control. The delay mostly goes away the second time through, as if whatever's actually playing the mp3 is cached and primed.
- jsantell 14y ago
  In Chrome, the Web Audio API is used -- not using an audio tag. As each chunk of the buffer comes in to be played and decoded, it's processed for spectrum and waveform data: https://github.com/jsantell/dancer.js/blob/master/src/adapterWebkit.js https://github.com/jsantell/dancer.js/blob/master/src/adapte...
DotSauce 14y ago
Love it! Please hook this up with SoundCloud.
- jsantell 14y ago
  Someone has gotten it working with the soundcloud api to pull in songs from soundcloud and visualize it, getting an example up on the repo :) or do you mean natively on the soundcloud website? (something else I'd love to do!)
goldenchrome 14y ago
This would have made my hack project a lot easier. Made this visualizer using Mozilla's Audio Data API and canvas (so it only works in FF). http://students.washington.edu/rishia/colors/colors.html http://students.washington.edu/rishia/colors/colors.html

52 points by jetcom 14y ago

pella 14y ago

http://news.ycombinator.com/item?id=4074187 http://news.ycombinator.com/item?id=4074187

very nice. good to see this as an open js library which uses canvas. seeing these kind of visualisations always makes me wonder though... is the amplitude of the spectrum all the info we can obtain and use for visualisation? How difficult would it be to make an api that can detect the different types of sound in a sample and put out different data streams for each?

mdpane 14y ago
fuck you, I'm not making enough money to care too deeply about this
jsantell 14y ago
that would be.. tricky. almost impossible to generalize, I'd imagine, but who knows

city41 14y ago

I'm curious how he was able to synchronize to the audio. I have found with at least Chrome on OSX, the audio tag's callbacks have a varying delay with the audio. Seems to be at the OS level and beyond Chrome's control. The delay mostly goes away the second time through, as if whatever's actually playing the mp3 is cached and primed.

jsantell 14y ago
In Chrome, the Web Audio API is used -- not using an audio tag. As each chunk of the buffer comes in to be played and decoded, it's processed for spectrum and waveform data: https://github.com/jsantell/dancer.js/blob/master/src/adapterWebkit.js https://github.com/jsantell/dancer.js/blob/master/src/adapte...

DotSauce 14y ago

Love it! Please hook this up with SoundCloud.

jsantell 14y ago
Someone has gotten it working with the soundcloud api to pull in songs from soundcloud and visualize it, getting an example up on the repo :) or do you mean natively on the soundcloud website? (something else I'd love to do!)

goldenchrome 14y ago

This would have made my hack project a lot easier. Made this visualizer using Mozilla's Audio Data API and canvas (so it only works in FF). http://students.washington.edu/rishia/colors/colors.html http://students.washington.edu/rishia/colors/colors.html