Doppler Gesture Sensing In JavaScript

[Daniel] stumbled on an interesting paper (which we featured before) on Doppler gesture sensing using only a computer’s speaker and microphone. Unfortunately the paper didn’t include source code so [Daniel] created his own implementation of Doppler gesture sensing in JavaScript that works right in the browser.

[Daniel]’s JavaScript library generates a sine wave at 20 kHz that’s played through the computer’s speakers. The frequency is high enough that it’s pretty much inaudible. While the tone is being played through the speakers, the computer’s microphone is used to sample the audio and calculate the frequency spectrum of the signal. As you move your hand closer to the computer while the tone is playing, the frequency of the received signal shifts higher; as you move your hand away, it shifts lower. [Daniel]’s script looks for this frequency shift and uses it to trigger events.


[Daniel] has some awesome examples included on his website where you can test out the functionality for yourself. He has a hands-free scrolling example, spectrum plot, and even a virtual theremin. Since his code is bundled up into an easy-to-use library, it should be fairly easy to integrate into any webpage. The only real limitation to the library is that it only works in Chrome right now (Firefox doesn’t support disabling echo cancellation).

19 thoughts on “Doppler Gesture Sensing In JavaScript

  1. Sweet. Reminds me a lot of the Doppler audio demo that ran on the NeXT cube to show off its DSP, in 1989 or so. It used lower frequency and would show people walking around the room. It was just a demo though, IIRC, not a UI method.

  2. Hmm so now my browser can tell if I’m sitting in front of the screen.. It just needs to wait till I go for a coffee and it’ll be up to all sorts. /me adjusts tinfoil hat.

  3. Must be April 1st because I just spent 10 minutes waving my had in front of the laptop like a crazy person to no effect.

    Hope cam was not secretly activated and footage uploaded to youtube.

    1. Your browser requires you to allow the camera/microphone to be turned on. So unless you clicked to allow the camera, it won’t have been turned on. Although I personally have a piece of tape over my camera just in case.

      I tested the demo and it works fine. Did you scroll down the page to actually activate the demo? Did you allow the page to use your microphone? Did you turn up your speakers?

  4. Using two discrete tones on left and right speakers while using two microphones on seperate channels arrayed perpendicular to the center line of the speakers would allow for some 3D gesture mapping.

Leave a Reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.