Audio Recording in the Browser

17 Jul 2009

I’m really excited to announce a new feature in Jetpack 0.4 – Audio Recording. “Jetpacks” can now access the microphone with just a few simple lines of Javascript:

jetpack.future.import('audio');
jetpack.audio.recordToFile();
var path = jetpack.audio.stopRecording();

The result is an audio file encoded in Ogg/Vorbis, which you can then playback with jetpack.audio.playFile(), or if you choose to upload the file to a remote location, using the <audio> tag.

A sample Jetpack I came up with that uses this feature is Voice Memos. It lets you record a memo that is mapped to the page you were on when you recorded it (which is achieved using Simple Storage), and also displays a list of recorded memos in a SlideBar. If you revisit a page attached to a memo, you will be notified via the SlideBar.

The code to achieve this was written in a couple of days, but I spent the better part of last week trying to build the component on Windows. The Mac/Linux versions seem to (mostly) run without issues, but Windows support is a little flaky at the moment. Part of the problem is that the XPCOM component dynamically links against portaudio and libsndfile, after which DLL Hell ensues. We’re looking to resolve these issues in upcoming releases as well as reducing the size of the XPIs.

One of my future goals is to allow raw PCM streaming rather than just recording to a file so you can do cool things like manipulating audio on the fly.

In the meantime, do play around with this feature - we’d love to know what you think! The JEP for Audio support can be found here, and there’s a group for Jetpack-related discussion.