HTML and CSS Reference
In-Depth Information
The
muted
attribute is also extremely new, and had not been implemented—as an attribute—in
any browser when this was written.
The combination of
loop
and
autoplay
can be used to create a background sound for when a
page is loaded. You'll want to use this functionality sparingly, but it could be useful if you're
creating a more presentation-like website where sound is tolerated, even expected, by your
ment that doesn't have a
controls
attribute, and is also hidden using CSS, just in case the
user's browser has scripting disabled. The sound will play as soon as the page and media are
loaded, and continue to play until the user leaves the page.
Example1-6.Arepeatingautostartedaudiofileintwodifferentformatstoensurebrowser
coverage
<!DOCTYPE html>
<head>
<title>Repeating Audio</title>
<meta charset="utf-8" />
<style>
#background
{
display: none;
}
</style>
</head>
<body>
<audio id="background" autoplay loop>
<source src="audiofile.mp3" type="audio/mpeg" />
<source src="audiofile.ogg" type="audio/ogg" />
</audio>
</body>
The example works in IE, Opera, Chrome, and Safari. It only partially worked in Firefox at
the time this was written because Firefox (5, 6, or 7) doesn't currently support the
loop
attrib-
ute.
You'll want to use
display: none
for the CSS style setting of the
audio
element, to ensure
that the element doesn't take up page space. You might be tempted to use the
hidden
attrib-
ute, but doing so just to hide the element is an inappropriate use of the attribute. The
hidden
attribute is meant to be used with material that isn't relevant immediately, but may be at some
later time.
You can use the
loop
and
autoplay
with video files, but unless the video file is quite small,
or encoded to load progressively, you're not going to get the same instant effect that you get
with audio files.
