HTML5 Web Audio API Demos and Libraries

As I was putting together my dancerjs demo, I realized that HTML5 has really pushed the ability to work with audio in the browser. I think that was done mostly for HTML5 games but the Web Audio API can really be used to execute some amazing concepts that mix visuals with sound. For example, check out Dinahmoe’s Plink or Jacob Seidelin’s canvas music visualization. If you like these, take a look at Felix Turner’s awesome Audio Reactive Waveform with Web Audio API and Three.js.

Looking for more demos? Cameron Adams did the Anatomy of a Mashup which focuses on combining songs together while creating a neat visualization while 9Elements combined their canvas visualization with Twitter. I think these demos are amazing and it feels like the possibilites are endless. You could even add on processingjs and utilize this HTML5 canvas wave generator to create more realistic waveforms with your audio.

Now, while we have some great demos using the HTML5 Web Audio API, there has also been a lot of development into JavaScript Libraries dedicated to sound and audio. For example, WebAudio.js(a direct adaptation of tQuery.Webaudio) is a sound library for games on top of Web Audio API, with some impressive examples like Pulse2d or histotQuery. Then, we have Timbre, which is a JavaScript Library for Objective Sound Programming. It has a lot of great examples and good documentation. Finally, there is SoundsJS which looks very solid with great demos. So, are you using any of these for your project?

Update: If you are just starting with HTML5 Audio, I advise you to check out this Stuart Memo’s introduction to Web Audio API and making sine, square, sawtooth, and triangle waves. Also, check out this really cool demo by James Long from Mozilla using the Web Audio API (here is the source). Also JPC2000 is a JS-Powered Beat Production Station in JavaScript form. Here is a 1K JavaScript Speech Synthesizer and this is a music box in just 1k of code. And this one adds motion detection via your webcam where you can play notes on a xylophone built in HTML. This is a Virtual Piano in HTML5.

How about playing audio on hover using Web Audio API or messing around with beats via Bangarang Boomerang which is also built on the Web Audio API. If you like guitars, Pedalboard.js is a open-source JavaScript framework for developing audio effects for guitars. mod.js is a Javascript MOD player using Aurora.js and the resampler from XAudioJS. Also, on this subject, HTML5rocks has a new post about Web Audio Input which allows you to to get low-latency access to live audio from a microphone or other audio input on OSX and latest Chrome. They also have an awesome collection of web audio demos that are worth checking out (like this cool Pitch Detector).

Claudio Brandolino’s Local Music Visualizer lets you drag an audio file to play it locally and visualize it using HTML5 and web audio api. Pedro Ladaria created riffwave.js which allows you to encode audio data so that you can play synthesized sounds with the HTML5 audio tag. Jos Dirksen has written a really great article with cool examples on using web audio API to visualize sound. Also, stuartmemo has created Abbey Load which lets you easily load audio files into a project that uses the Web Audio API and Wavy Jones which lets you add an oscilloscope to your Web Audio project.

I also really like this HTML5 and Javascript Modular Synthesizer. Also, check out this demo of using Web Audio filters.

Update 2: I’m surprised I have not mentioned this HTML5 Audio Editor before, as well as ThreeAudio.js, which helps you create music visualizations in Three.js or tQuery. I also love all the JavaScript decoder work for mp3, flac, and aac. If you are a fan of AWK, this awk music project is pretty cool (but it has nothing to do with Web Audio APIs) and for something really amazing and right on subject, here is Google’s Jam with Chrome, a web based musical project where people can jam in real-time. If you think that is awesome, check out the case study write-up from html5rocks about jamwithchrome audio.

Update 3: Tuna is an awesome audio effects library for Web Audio. jsfx is a JavaScript library for sound effect generation. And, on this subject, there many more amazing demos from Music Hack Day. In terms of audio libraries, Audio5js is a a light-weight Javascript library that provides a seamless compatibility layer to the HTML5 Audio API (multiple codec support and a Flash-based MP3 fallback).

Today, I just saw Euphony, a really cool WebGL visualization of a MIDI file being played that kind of reminds me of something like guitar hero. I also like this HTML5 JavaScript Piano and this old cassette player. Finally, Howler.js is an audio library that defaults to Web Audio API and falls back to HTML5 Audio.

Update 4: Today, I was introduced to Recorder.js which is a plugin used for recording and exporting the output of Web Audio API nodes. I have also looked at MIDI.js which generates MIDI sound with the WebAudioAPI and allows you to make piano or guitar simulations, drum machines, MIDI recording, etc. Speaking of drum machines, check out beat petite and this awesome MIDI version of Shiny Drum Machine. Also, this Spectrum Analyzer is a cool implementation of D3 and HTML5 Audio.

Update 5: Check out this awesome HTML5 Cloud Composer App. Here is another JavaScript Synthesizer and take a look at this JavaScript Dubstep Generator. Also, here is a great article on making HTML5 audio work on mobile. This is a really cool web audio playground. Also, check out radar from hakim. Finally, check out harmogram, am audiovisual experience powered by HTML5 Audio API and Paper.js and band.js, an interface for the Web Audio API that supports rhythms, multiple instruments, repeating sections, and complex time signatures

External:

Web Audio API Progress
WAAX – experimental JavaScript library built on top of Web Audio API
Web Audio Components
Custom Audio Effects in JavaScript with the Web Audio API
Ultrasonic Networking on the web
WebAudio API Demo List
wavesurfer.js – Web Audio Waveform Visualizer