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.
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.
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.
Web Audio API Progress
Web Audio Components
Ultrasonic Networking on the web
WebAudio API Demo List
wavesurfer.js – Web Audio Waveform Visualizer