HTML and CSS Reference
In-Depth Information
Working with Audio
You can't physically manipulate audio with HTML5 Canvas as directly as you can
video, but many canvas applications can use that extra dimension of sound. Audio is
represented by the HTMLAudioElement object manipulated through JavaScript, and by
the <audio> tag in HTML5. There is no Canvas API for audio nor, really, is one neces-
sary. However, there are many ways that you might want to use audio with HTML5
The Basic <audio> Tag
The basic usage of the <audio> tag in HTML5 is very similar to that of the <video> tag.
The only required property is src , which needs to point to an existing audio file to play
in the browser. Of course, it's always nice to show some audio controls on the page,
and this can be accomplished using the controls Boolean, just as we did with <video> .
The code in Example 7-1 will load and play song1.ogg in a web browser that sup-
ports .ogg file playback, as shown in Figure 7-1 . (Reminder: not all browsers support
all formats.)
Example 7-1. Basic HTML5 audio
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>CH7EX1: Basic HTML5 Audio</title>
<audio src="song1.ogg" controls>
Your browser does not support the audio element.
Search WWH ::

Custom Search