10 ms·
Dancer.js, a high level audio api to make visualizations
- jmsduran 14y agoAn interesting project, I almost spilled coffee on my lap due to being blasted by dubstep upon visiting the page.
- jsantell 14y agoWill incorporate volume and start/stop controls. However, a dubstep slider may not be an option
- thoughtpalette 14y agoI also cringed with surprise after loading.
- jack-r-abbit 14y agoThe 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?
- gooderlooking 14y agoOn 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 14y agoMobile 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.
- showerst 14y agoAudio 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 14y agoBeat 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).
- deleted 14y ago[deleted]
- jsantell 14y agoThe library is leveraging FFT Corban Brook's dsp.js FFT -- while it's not beat detection in the sense that it's able to tell a track is 140 BPM, you can specify a minimum threshold of a frequency's amplitude to register as a beat, and then that decays until the frequency's amplitude surpasses both the minimum and decay rate -- all configurable
- batista 14y ago>I understand 'beat detection' in music to be a really hard problem Hard? Actually it is very easy on rock/dance/pop music. It's only difficult in classical/jazz pieces.
- aidenn0 14y agoThis crashes chromium for me
- jsantell 14y agoNoted, thanks!
- Jonovono 14y agoThis is cool. I wish it could work on youtube videos. I would like to use it on tunesicles.com!
- wetherbeei 14y agoRangeError: ArrayBufferView size is not a small enough positive integer (dancer.js:405) on Chrome. Idle visuals are nice though.
- jsantell 14y agoWhat version/OS of chrome?
- jblock 14y agoUncaught 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.
- jsantell 14y agoGuessing you're using some webkit browser -- Chrome/Chromium/Safari? I'll check it out then -- thanks!
- ga2arch 14y agosame 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 14y agoAwesome! Just made a ticket for this: https://github.com/jsantell/dancer.js/issues/8 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 https://github.com/jsantell/dancer.js/issues/6
- jsantell 14y agoNow fixed in the source -- Chrome Canary v21 has 1 audio channel where earlier Chrome has 2: https://github.com/jsantell/dancer.js/issues/8 https://github.com/jsantell/dancer.js/issues/8
- iM8t 14y agoSadly, the music was playing, but nothing else was going on on my galaxy tab 10.1.
- rglover 14y agoCan 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 14y agoOut 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 https://github.com/katspaugh/wavesurfer.js
- deleted 14y ago[deleted]
- HorizonXP 14y agoI see this on my BlackBerry Dev Alpha. http://imgur.com/lmInK http://imgur.com/lmInK The music loads, the particles move, but not really in sync with the music. It just spins...
- hwillis 14y agoIt takes a few seconds to start. The particles should pulse on each kick. You may not be able to hear it very well, its very bass-heavy.
- HorizonXP 14y agoOk, I just tried it on my desktop, and it works perfectly in Chrome. On the Dev Alpha, like I said, I see rotating fuzzy balls, but not the beat synch'd animation like I see on Chrome. At the top, I see the spectrum scrolling by, with it averaging about 20 FPS. I cannot click on toggle FFT spectrum, it doesn't recognize my tap. Like a limitation with the WebGL implementation.
- jsantell 14y agoBoth 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 14y agoI'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 14y agoI'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..
- hwillis 14y agoWorking on chrome 19.0.1084.46 m (haven't updated in a while). Seems weird that so many people are having problems