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 supports .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"
>
<head>
<meta
charset=
"UTF-8"
>
<title>
CH7EX1: Basic HTML5 Audio</title>
</head>
<body>
<div>
<audio
src=
"song1.ogg"
controls
>
Your browser does not support the audio element.</audio>
</div>
</body>
</html>
Figure 7-1. The very basic HTML5 <audio> tag
Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.