A live-input spectrogram written using Polymer using the Web Audio API.

If you're running Chrome or Firefox, see it in action. Once the spectrogram is running, see if you can make a pattern with your speech or by whistling. You can also click anywhere on the page to turn on the oscillator. For a mind-blowing effect, load this in a parallel tab.

Why?

Having a spectrogram is incredibly handy for a lot of the work I've been doing recently. So a while ago, I built one that satisfies my needs. It runs in a full-screen, using the microphone input as the source.

It also includes an oscillator, which plays a sine wave at the frequency of your pointer. It also shows you the frequency that it plays back, and plots a short buffer of pointer positions. This is handy for measuring internal latency:

Having the oscillator built-in is also pretty fun. You can send morse code (short short short, long long, short short long, short short short), scan for radio stations, make 8-bit character dying sound effects, simulate aliens, ghosts and theremins, and annoy small, annoying dogs.

I use the tool mostly in Chrome, but it also works in Firefox. Unfortunately no other browser currently has both getUserMedia and Web Audio API support.

Configuration parameters

The following are HTML attributes of the g-spectrogram component. Many of them are also configurable via the spectrogram controls component, which shows up if the controls attribute is set to true.

• controls (boolean): shows a config UI component.
• log (boolean): enables y-log scale (linear by default).
• speed (number): how many pixels to move past for every frame.
• labels (boolean): enables y-axis labels.
• ticks (number): how many y labels to show.
• color (boolean): turns on color mode (grayscale by default).
• oscillator (boolean): enables an oscillator overlay component. When you click anywhere in the spectrogram, a sine wave plays corresponding to the frequency you click on.

Using the Polymer component

If you are inclined to embed this component somewhere, you can, since it's implemented in Polymer, which, by the way, is an awesome framework. Once you've gotten started, here's the simplest possible version:

<g-spectrogram/>

Enable controls:

<g-spectrogram controls></g-spectrogram>

Pass parameters to the component:

<g-spectrogram log labels ticks="10"></g-spectrogram>

Future work ideas

It would be great to add a few things to this tool. If you're interested in helping, submit your changes as a pull request on github. Some ideas for things that can be done:

• Improved axis labeling.
• Make it work in mobile browsers.
• Loading/saving of traces.
• Loading audio data from a file.
• Zoom support.
• Higher precision FFT results (would require writing a custom FFT rather than using the one built into Web Audio API.)