19 6 / 2010
Visualizing and Manipulating Audio in the Browser
The Firefox team has been busy working on the HTML5 Audio Data API, which lets JavaScript code interact with the Audio tag in a bidirectional manner. Developers have been busy putting together some cool demos of what the API enables, including visualizations using the Canvas element, as well as playing interactive audio generated by JavaScript itself.
Jacob Seidelin has written some Winamp style visualizations for live audio playing in the browser. If you are not running the experimental version of Firefox that this API is a part of, the audio playback will fall back to Soundmanager2 (Flash audio). This shows what is now possible in the browser in real time. I hope that other browsers implement the API soon!
Another demo, this time using WebGL for hardware-accelerated 3d graphics, was written by Charles Cliffe and does beat detection. It uses the CubicVR 3D engine built on WebGL as well as Processing.js for the rendering. Very cool!
At the beginning of this post, I mentioned that the API worked in the opposite direction as well: audio output from JavaScript. One of the demos showcasing this technology, was written by Alistair MacDonald, and is an instrument inspired by Brian Eno’s Bloom iPhone application. Check out the demo video, below.
Finally, check out this text-to-speech engine written in JavaScript using the Mozilla Audio API. It is a real showcase of what the browser is now able to do. Awesome work, everyone. For more demos, check out this post on the Bocoup blog by Alistair MacDonald. JavaScript FTW!
