HTML and CSS Reference
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
web page readers. Example 1-6 demonstrates how to use these attributes with an audio ele-
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.
<meta charset="utf-8" />
<audio id="background" autoplay loop>
<source src="audiofile.mp3" type="audio/mpeg" />
<source src="audiofile.ogg" type="audio/ogg" />
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-
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
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.