HTML and CSS Reference
In-Depth Information
<audio controls autoplay loop>
<source src="song1.mp3" type="audio/mp3">
<source src="song1.wav" type="audio/wav">
<source src="song1.ogg" type="audio/ogg">
</audio>
Just as we did with video, we have placed the audio type with the broad-
est support for iOS devices first in the list. This is because handheld
devices do not do well with multiple embedded sources.
We created
.ogg
,
.wav
, and
.mp3
versions of the song using Audacity.
Example 7-2
gives
the full code.
Example 7-2. Basic HTML5 audio revisited
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH7EX2: Basic HTML5 Audio Revisited</title>
</head>
<body>
<div>
<audio controls autoplay loop>
<source src="song1.mp3" type="audio/mp3">
<source src="song1.ogg" type="audio/ogg">
<source src="song1.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
song1
was created 10 years ago using Sonic Foundry's Acid music-
looping software. Acid is an amazing tool for creating soundtracks be-
cause it can help even the musically inept (read: us) create songs that
sound perfect for games and applications. Acid is now sold by Sony for
Windows only. Songs can be created on the Mac in a similar way using
GarageBand.
Audio Tag Properties, Functions, and Events
Similar to the
<video>
tag, the
<audio>
tag in HTML5 is based on the
HTMLAudio
Element
DOM object, which is derived from
HTMLMediaElement
.
