Question

I’m working on a simple music visualization. Probably not relevant, but I am doing the sound processing using the new WebKit Audio Data API and the dsp.js library.

I want to make a text vibrate (grow/shrink) to the rhythm of the music. What is the best way to do this?

What I’ve done so far is ran the signals through a FFT. I look at the bottom 10% of frequencies (bass notes?) and when the amplitude surpasses a certain threshold, I animate the text.

Does this sound right? Or am I completely off?

Answer 1

You say you’ve done it, and then you ask if you are way off? Well, you tell us: does it work for your application?

One potential problem is that the FFT is slow, both in that there may be a lag between your input and output and there will be a lot of CPU used. I don’t expect this will matter for your application, but, in general, you are better off using a low-pass filter. When the output of the low-pass goes above some level, you can use that to trigger something for some short amount of time.

Another issue is simply that this is only a very basic beat detection algorithm. It might work for bass-heavy “four on the floor” music, but you’ll need to figure out where the threshold goes and how to keep it moving when the bass stops or something. You may want to research beat detection algorithms. The open source aubio has some.

http://aubio.org/