Web Audio API Visualization: AudioContext() + createMediaElementSource() + createAnalyser() / getByteFrequencyData() method test

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

Related: createScriptProcessor() 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 getByteFrequencyData method of an AnalyserNode instance, when using createMediaElementSource() and specifying an Audio() object.

Observed (summary): Audio channel data is 0 under Safari 7 and iOS 7 during playback. Firefox chokes on initial playback, does not respect <audio> volume control and incorrectly reflects playback position (bugzilla #944924.)

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