Web Audio API Visualization: AudioContext() + createMediaElementSource() + createScriptProcessor()audioprocess event test

(Published November 28th, 2013. Updated 11/30.)

Related: createAnalyser() method test.

Objective: Retrieve audio channel data during playback using the Web Audio API, with a standard Audio() object as the media source. It is expected that the media source approach avoids complexity and performance considerations (sequential loading, memory, decoding) associated with the alternate XHR + "arraybuffer" response approach - particularly when using longer sounds. (Related article.)

Expected: Audio channel data should be available via the audioprocess event of an object returned from an audio context's createScriptProcessor method, when using createMediaElementSource() and specifying an Audio() object.

Observed (summary): Audio channel data is not shown under Safari 7 or iOS 7, despite successful object creation following "expected" method as described. Firefox chokes on initial playback, does not respect <audio> volume control and incorrectly reflects playback position (bugzilla #944924.) Chrome stops firing audioprocess when Chrome DevTools are opened(?)

Live demo

Warning: Firefox and/or iOS might play incredibly loud digital noise, ignoring system volume settings, during seek or playback. Don't wear headphones directly on ears to be safe.

Refer to console for JS debug output, event attachment messages etc.

Observed details