Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

Plucked HTML5 Audio Editor, and ThreeAudio.js Visualizer

July 12th 2012

We have two audio related items in the news today: the beginnings of an HTML5 audio editor called Plucked and a Three.js based audio visualization toolkit called ThreeAudio.js.

Plucked

Plucked is the beginnings of a basic HTML5 audio editor based on the Web Audio API, which means that at the moment, it only works in Chrome, WebKit nightly builds, and Safari 6 beta.  Although it says it can edit WAVE, OGG and MP3 files, I only had luck with WAVE files.

Currently, it displays a basic waveform like you might expect from an audio editor, and a spectrum visualization animates as you play.  You can select, cut and paste, and even zoom in on the waveform.  As for editing features, it currently supports gain adjustment, volume normalization, silencing, and fades.  When you’re done editing, it will export your creation as a WAVE file.

Besides the Web Audio API, and canvas, the app is built on Twitter’s Bootstrap toolkit, and makes use of Web Workers and the File API.  Of course, you can check the code for Plucked out on Github and check out the demo here.

ThreeAudio.js

ThreeAudio.js is a library to make building music visualizations in the browser easier.  It uses the Web Audio API to read audio data, and exposes it to your Three.js GLSL shaders.

ThreeAudio will read from an audio source and provide frequency/time data in the form of textures, as well as derived values for volume, bass, mid range and treble. Use the included ThreeAudio.Material class to create ShaderMaterials that can read from the audio data.

You can see an example of ThreeAudio.js and the code for the library itself on their Github page.

Both of these demos would be awesome uses of Aurora.js, by the way, which could provide the streaming and decoding support for more codecs. :)

Nice to see cool audio demos in the browser.  I have a feeling this space is one to watch, and to do so, a bonus tip is to follow the new HTML5Audio blog, which covers these web audio related topics on a daily basis.  Cheers!