HTML and CSS Reference
In-Depth Information
Figure 9.8
Our Styles Conference Speakers page after adding images for each of the
speakers
Adding Audio
HTML5 provides a quick and easy way to add audio files to a website by way of the
<au-
dio>
element. As with the
<img>
element, the
<audio>
element accepts a source URL
specified by the
src
attribute. Unlike the
<img>
element, though, the
<audio>
element
requires both opening and closing tags, which we'll discuss soon.
1.
<audio src="jazz.ogg"></audio>
Audio Attributes
Several other attributes may accompany the
src
attribute on the
<audio>
element; the
most popular include
autoplay
,
controls
,
loop
, and
preload
.
The
autoplay
,
controls
, and
loop
attributes are all Boolean attributes. As Boolean
attributes, they don't require a stated value. Instead, when each is present on the
<audio>
element its value will be set to
true
, and the
<audio>
element will behave accordingly.
By default, the
<audio>
element isn't displayed on a page. If the
autoplay
Boolean at-
tribute is present on the
<audio>
element, nothing will appear on the page, but the audio
file will automatically play upon loading.
1.
<audio src="jazz.ogg" autoplay></audio>
To display the
<audio>
element on a page, the
controls
Boolean attribute is necessary.
When it's applied to the
<audio>
element, the
controls
Boolean attribute will display
a browser's default audio controls, including play and pause, seek, and volume controls
(see
Figure 9.9
)
.
1.
<audio src="jazz.ogg" controls></audio>
Figure 9.9
An audio clip with the default Google Chrome browser controls
Search WWH ::
Custom Search