Information Technology Reference
In-Depth Information
the users' audio input device. While it was possible to add audio to your user experience
via the
embed
and
object
tags, more often than not you were left with a pretty limiting
and unacceptable user experience that left your end users—and developers—wishing
for more.
The rise in HTML5 adoption rates, has made working with audio (while still a pain on
some rare instances) generally smooth in Android implementation of the HTML5
audio
tag. There are plenty of examples out there of mobile web applications and games
making use of the audio element to bring background music and sound effects to their
projects, which can help create more engaging scenarios for users to explore.
Unfortunately, like most things in the Web Development world, not all audio codec's are
created equal. This is especially true when focusing on the mobile world. Google's
Android operating system has been making use of the HTML5 audio tag since Android 2.0
first came out in the middle of 2010, yet it only makes use of two of the more popular
audio codec choices—MP3 and the AAC audio format.
Utilizing the HTML5 audio Tag
Using the HTML5
audio
tag is really simple. Take a look at this example in Listing 11-1
where we add a repeating audio loop to a user's page.
Listing 11-1.
Basic use of the HTML5 audio element
<audio autoplay="autoplay" controls="controls">
<source src="audio/stairwell.ogg" type="audio/ogg" />
<source src="audio/stairwell.mp3" type="audio/mpeg" />
"Sorry, your browser does not support the audio element."
</audio>
The basic usage of the audio tag is very similar to other tags in the HTML space. When
declaring the HTML audio element, we could invoke several attributes in our document.
Let us take a look at some of those attributes below:
autoplay
—If called this attribute will play your audio element the
moment it is ready and available
controls
—
Determines whether or not the controls for this audio
element are displayed to the user.
loop
—If set, this attribute tells the audio to loop itself indefinitely. Just
like the song that never ends!
preload
—This determines whether or not the audio element will be
preloaded into the page on document load.
src
—
The URL to the audio file.
Looking at Listing 11-1, we can also notice that the
audio
tag contains two other source
tags as well. These
source
tags each have
src
attributes that point to the URL of the file
on the server.
