Audio Tags and Elements in
HTML5
Sound plays a very crucial role in our daily
life. We just cant imagine a world without sounds. Not even in humans but sound
plays vital role in animals life too, think of the croaking sound of toads,
chirping of birds, barking of dogs etc. When we have turned every real world
entity to interact with our digital world why should this property remain
undiscovered, here HTML5 comes to the rescue, It includes a variety of sound
formats and audio properties to be included in a static page that it seems more
lively than simply static one infact these tags are as easy to handle as other
tags in HTML. Let's explore this tag in HTML5.
Using audio tag:
Step 1 : Open any HTML editor (ex.
visual studio, Notepad etc) and in the source code page (page where you want to
write the HTML code) type the following lines.
To include multiple audio files use the following
lines
<audio
controls="controls"
>
<source
src="song1.mp3"
type="audio/mp3"
/>
<source
src="song2.wma"
type="audio/wma"
/>
<source
src="song3.wav"
type="audio/x-wav"
/>
</audio>
Step 2 : Now before previewing the output in the browser you need to check whether the format that you include for multiple formats of audio files in your browser support all the tags. see the figure
below to know which format is supported by which browser.
Step 3 : I have IE7 so I'll preview the
output in this browser also if your browser doesn't support this format then the
output will be a blank page otherwise the page looks like this:
Properties of the <audio></audio> tag:
Preload property : This property
allows the user to extract the best experience from the browser. It specifies if and
how the user thinks that the audio should be loaded when the page loads.
This property is of three values
- none : This value is used when the user thinks that the browser should load the
entire audio file when the page loads.
- metadata : The user thinks that the browser should load only metadata when the page loads.
- auto : The user thinks that the browser should NOT load the audio file when the page
loads.
These property/attributes are used as below:
<audio
controls="controls"
>
<source
src="song1.mp3"
type="audio/mp3"
preload="none"
/>
</audio>
<audio
controls="controls"
>
<source
src="song2.ogg"
type="audio/ogg"
preload="metadata"
/>
</audio>
<audio
controls="controls"
>
<source
src="song3.aac"
type="audio/aac"
preload= "auto"
/>
</audio>
Other properties/attributes used in audio tag
are:
Step 4 : Now to see the effect of these
properties over the network while running the page press F5 to run the
application and then on the IE output page press F12, then in the split screen
that opens up go to cache--> check the option " Always refresh from server".
Step 5 : Write this line
<source
src="song1.mp3"
type="audio/mp3"
preload="none"
/> and preview in the browser,
Now go to network -->press
"start capturing" button and then play the audio file in the web page. This
opens up with a new screen which shows how much time the browser takes to load
the audio file.
Step 5 : Write this line
<source
src="song1.mp3"
type="audio/mp3"
preload="metadata"
/> and preview in the browser,
Now go to network -->press
"start capturing" button and then play the audio file in the web page. This
opens up with a new screen which shows how much time the browser takes to load
the audio file.
Step 5 : Write this line
<source
src="song1.mp3"
type="audio/mp3"
preload="auto"
/> and preview in the browser,
Now go to network -->press
"start capturing" button and then play the audio file in the web page. This
opens up with a new screen which shows how much time the browser takes to load
the audio file.
Loop Property : This property allows
the audio clip to clip forever until the clip is manually stoped or pused by the
user. See the following line to know how to use this property.
<audio
src="song1.mp3"
type="audio/mp3" loop
>
</audio>
To use loop in multiple audio tags write the
following lines:
<body>
<audio
src="song1.mp3"
type="audio/mp3" loop
>
</audio>
<audio
src="song2.mp3"
type="audio/mp3" loop
>
</audio>
<audio
src="song3.mp3"
type="audio/mp3" loop
>
</audio>
<audio
src="song4.mp3"
type="audio/mp3" loop
>
</audio>
</body>
Conclusion : HTML5 is very sophisticated
and user friendly language, soon all the browsers will be supporting this
language and thus creating rich interactive user interfaces in web pages will be
much more easy in the coming time.