
Dancer.js, a high level audio api to make visualizations - toni
http://jsantell.github.com/dancer.js/
======
jmsduran
An interesting project, I almost spilled coffee on my lap due to being blasted
by dubstep upon visiting the page.

~~~
jsantell
Will incorporate volume and start/stop controls. However, a dubstep slider may
not be an option

~~~
thoughtpalette
I also cringed with surprise after loading.

------
showerst
Audio Noob question: I understand 'beat detection' in music to be a really
hard problem, are they successfully doing it here in javascript, or is this
doing something else?

~~~
padenot
Beat detection usually work by taking the Fourier transform of the signal, and
by observing the changes around 100Hz (the frequency where the kicks are,
usually, may need tuning). By observing the changes in frequency, one can
'detect beats'.

The 'hard' part here is to compute the Fourier transform (which can be both a
hard maths and performance problem for a person who knows nothing about signal
processing), but quite a few implementations exist in javascript already
(plus, if the author uses the new typed arrays, it brings a nice speed boost).

------
jblock

      Uncaught TypeError: Cannot read property '0' of null, dancer.js:319
    

All I see are floating particles. The code looks sleek, though, and I'd love
to see it working. I had a hacked up WebGL visualizer for a computer graphics
class long ago, but it was nowhere near as thoughtfully written.

~~~
ga2arch
same problem on Chrome 21.0.1165.0 canary.

I'll dig into the code for sure, i just started webgl and this kind of things
is perfect to learn.

~~~
jsantell
Awesome! Just made a ticket for this:
<https://github.com/jsantell/dancer.js/issues/8>

And of note, while this is using Three.js, it's just using a CanvasRenderer,
since FF has problems with loading particles (without a system) in WebGL. Made
a ticket for it since this will improve performance as well
<https://github.com/jsantell/dancer.js/issues/6>

------
HorizonXP
I see this on my BlackBerry Dev Alpha. <http://imgur.com/lmInK>

The music loads, the particles move, but not really in sync with the music. It
just spins...

~~~
jsantell
Both Mozilla and Webkit implemented different audio (Audio Data/Web Audio)
APIs -- wonder what BlackBerry Dev Alpha uses if any.. needs a better 'not
supported' message

~~~
HorizonXP
I'm not really up to speed on the differences between browsers, but the Dev
Alpha does use Webkit. Unsure what build we have, and what audio APIs are
actually supported. The fact that I hear the music and see the particles
moving is a start at least.

~~~
jsantell
I'll look into more webkit browsers -- I know on my Nexus S webkit browser, it
has awful performance, but the audio plays. If the
webkitAudioContext/AudioContext isn't found, it falls back to the Mozilla
implementation, which is an extension of the non-fancy HTML5 audio, which
means it will play audio, just be unable to read the frequency data from it --
and while the glowy balls move around independent of that data, there'll just
be no boom and shaking due to absence of the frequency data :)

Now to build Chromium and try on vanilla Webkit..

~~~
HorizonXP
That's exactly what I observe, so it likely is kicking back to the Mozilla
implementation.

If you need me to test/debug, give me a shout. I'd be happy to help.

~~~
jsantell
Great, will let you know :) although I need to do research on when/if/how the
Web Audio API is hitting mobile Webkit browsers..

------
gooderlooking
On my iPad and the idle visuals look great, but it doesn't get past "loading"
(no audio) and I can't click the github link.

I'll have to check it out on my computer when I go back inside.

~~~
jonknee
Mobile Safari has pretty weak HTML5 Audio support. Apple limited it to user
generated events, so for example you need to trigger play() from a touch
event. In this case it is triggered by a self executing function that runs
after onLoad and will not be followed by Mobile Safari. The demo could be
updated to offer a start button and then it could work on Mobile Safari. They
would also need to not use ogg as that is not supported by Mobile Safari
either.

------
rglover
Can this spit out a waveform of the entire track (i.e. similar to if I loaded
something in Garageband/Audacity, I could scrub through the track)?

~~~
jsantell
Out of the box, no, as this is frequency data rather than time-domain, but
could possibly be configurable in Webkit browsers. For an easier solution,
maybe something like: <https://github.com/katspaugh/wavesurfer.js>

------
jack-r-abbit
The delay before the music started had me thinking it wasn't working... and
then it was working very loudly. Did I miss the volume controls?

------
wetherbeei
RangeError: ArrayBufferView size is not a small enough positive integer
(dancer.js:405) on Chrome. Idle visuals are nice though.

~~~
jsantell
What version/OS of chrome?

------
hwillis
Working on chrome 19.0.1084.46 m (haven't updated in a while). Seems weird
that so many people are having problems

------
Jonovono
This is cool. I wish it could work on youtube videos. I would like to use it
on tunesicles.com!

------
iM8t
Sadly, the music was playing, but nothing else was going on on my galaxy tab
10.1.

------
aidenn0
This crashes chromium for me

~~~
jsantell
Noted, thanks!

