HTML and CSS Reference
In-Depth Information
The Audio Data APIs
It's easy to focus on the HTML5
video
element and forget that the specification also includes
a wonderful new facility to add audio to the web page. The
audio
element is just as easy to
work with as the
video
element, and the HTMLMediaElement and other API functionality
works equally well with the
audio
element.
What isn't part of the HTML5 or any other specification is functionality that is only relevant
to the audio type: the Audio Data APIs. The Audio Data APIs are a set of APIs being worked
on by Mozilla, Google, and Webkit—though not all on the same API—to add an API that not
only provides audio playback, but also audio generation, too.
Matt Hobbs had fun with the Audio Data API. He extrapolated Mr. Doob's efforts discussed
earlier in the chapter and combined the canvas visual effects with the Audio Data API. Greg
Jopa combined Mozilla's Audio Data API with the VexFlow music notation rendering API to
create an extraordinary web page-based online musical instrument.
NOTE
Matt Hobb's work combining canvas and the Audio Data API can be seen at
http://nooshu.com/three-
js-and-the-audio-data-api-visualisation
.
The work by Greg Jopa combining the Audio Data API and
VexFlow can be explored at
http://www.gregjopa.com/2010/12/html5-guitar-tab-player-with-firefox-
The Mozilla Audio Data API provides a way to get an array of values representing the audio
sample data. Though related to audio, evidently the functionality can be applied to the
audio
and
video
element, though you'll have access only to the audio data.
To access the data, add an event listener for the
MozDataAvailable
event to the media ele-
ment. In the event handler function, the event object provides access to the audio data through
the
frameBuffer.
Mozilla provides an example that actually takes this data and prints it out
to the page. I copied portions of it in
Example 4-7
.
Example4-7.Printing out the audio data to the web page
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Visualization Example</title>
<body>
<audio id="audio-element"
src="sharecropper.ogg"
