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.
Matt Hobb's work combining canvas and the Audio Data API can be seen at
js-and-the-audio-data-api-visualisation . The work by Greg Jopa combining the Audio Data API and
VexFlow can be explored at
audio-data-api/ .
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>
<title>JavaScript Visualization Example</title>
<audio id="audio-element"
Search WWH ::

Custom Search