Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to work with audio tag in HTML5

Adding sound to pages is an exciting feature in HTML5. This article looks at how to make use of the new audio tag in HTML5 to provide sound to your web pages.

Adding sound to web pages opens up a new world to the developers. Here is how you can add sound to a web page using the <audio> tag in HTML5

<audio> tag and its attributes

Syntax of the <audio> tag

You can add an <audio> tag to a page using the following syntax

Listing 1: Syntax of the <audio> tag

<audio src=”jazz.mp3”></audio>

The “src” attribute specifies the audio source. Here an mp3 file called jazz.mp3 is the audio source.

Autoplay

The autoplay attribute is self-explanatory. When this attribute is present in the audio tag, audio begins to play as soon as the page loads. So before adding autoplay attribute to the audio tag you should make sure that all your users are going to be okay with audio playing as soon as the page loads.

Listing 2: Autoplay attribute in <audio> tag

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Audio - Autoplay</title>
</head>
<body>
Audio is between the lines<br>
----------------------------------------
<br>
<audio src="jazz.mp3" autoplay></audio>
<br>
----------------------------------------
</body>
</html>

Note that the attribute does not have a value. The above code works well only in Chrome, IE9 and Safari. Firefox and Opera does not support mp3 file formats.

Controls

How can you control sound on your web page? Controls attribute is the answer. As with the autoplay attribute it does not have a value. Just add the controls attribute to the tag and the controls appear automatically.

Listing 3: Controls attribute in <audio> tag

<!DOCTYPE HTML>
<html>
<style type="text/css">
/* 694703,A83110,E89F06,F5D895,B3CF83 */
body {
	background-color:#B3CF83;
	font-family:Arial, sans-serif;
	color:#694703;
}
h1 {
	font-family:Arial, sans-serif;
	color:#A83110;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Controls</title>
</head>
<body>
<article>
<header>
<h1>Jazz Tonight</h1>
</header>
<section>
<p>Click the triangle to start the show: </p>
<audio src="mists.ogg" controls></audio>
<p>The || two pipes symbol stops all of this. </p>
</section>
</article>
</body>
</html>

Note that the above code does not work in IE9 and Safari.

The control has a triangle-shaped start button which toggles to a stop/pause when the audio runs. There is also a sound control to the far right. There is also an audio bar with a scrubber which is important for instructional audios where end user can target specific portions of the audio. Depending on the browser that you use to test the above code, the controls will be different.

Appearance of control in Safari

Figure 1: Appearance of control in Safari

Appearance of control in Opera

Figure 2: Appearance of control in Opera

Appearance of control in Chrome

Figure 3: Appearance of control in Chrome

Appearance of control in Firefox

Figure 4: Appearance of control in Firefox

Preload

This attribute is an important one and it preloads the audio before the play command is issued by the controller. In this way the users need not wait until the audio loads after they press play.

Listing 4: Preload attribute

<audio src=”jazz.mp3” preload></audio>

The simplest form of attribute does not have a value. However, the attribute can take the following values.

None: This may seem strange but if the chance of using the audio is remote, the developer can decide not to use internet resources and set the value to none.

Metadata: All audio files have some information associated with them like duration or some other data associated with it which the author of the audio file might have placed. In a scenario where the chance of playing the audio file is low, metadata can be displayed if reasonable ad it does not take up much internet resources.

Auto: This simply acts as a reminder that the audio is going to preload. It is equal to not having any assignment to the preload attribute.

Loop

When you want a sound to repeat endlessly you use the loop attribute. The advantage of this is that you can use a relatively short duration piece of audio and have it repeat using the loop attribute so that it sounds like a full composition. In this way minimum internet resources get used up and the web page can have continuous music.

Listing 5: Loop attribute

<audio src=”jazz.mp3” loop></audio>

Note that the loop attribute does not have a value.

For many reasons end users might want to turn off music. While it is easier to give end users control over audio with the controls attribute designers might want to deviate from showing the controls to end users. In this case you need to look at a JavaScript solution to give the end users control over turning the sound off. No matter how nice a piece of audio is, playing it endlessly can result in users avoiding your web page.

Browser support for audio

Here is a table showing the various audio formats and their browser support

Browser Mp3 Wav ogg
Chrome Yes Yes Yes
Firefox No Yes Yes
IE9 Yes No No
Opera No Yes Yes
Safari Yes Yes No

As you can see not all common formats are supported by all the browsers. So it is important that you cover the interests of the end users who have their own browser preference.

Using <source> tag

HTML5 has an element that can offer up several different audio formats and let the browser select the one that is compatible.

The <source> tag can be placed inside an <audio> container together with its audio source. Suppose you have a web page with instructional materials. Instead of asking your users to use a particular browser, you can specify multiple audio sources, different formats of the same audio file, and the browser can pick up and play the compatible file.

Listing 6: <source> tag

<audio controls>
<source src=”jazz.mp3”>
<source src=”jazz.wav”>
<source src=”jazz.ogg”>
</audio>

Using the type attribute

When setting up several different types of audio sources to cover all the browsers, you can enhance the process by using the type attribute. The information in the type attribute tells the browser whether it should even attempt to load the file.

The type attribute helps to save time. The interpreter in the browser looks at the line and determines if it can play the type or not. If it determines that it cannot play it does not try loading it. If the attribute is not present the interpreter tries loading all the specified audio formats till it finds the one it can play. The type attribute is optional but if your site has lots of traffic you can cut every unnecessary call with this attribute. The value of type attribute must be valid MIME types.

Listing 7: Type attribute

<audio controls>
<source src=”jazz.mp3” type=”audio/mpeg”>
<source src=”jazz.wav”type=”audio/wav”>
<source src=”jazz.ogg”type=”audio/ogg”>
</audio>

Using the codec attribute

The word codec stands for the combination of words compression and decompression. It explains how a file is encoded and decoded. Even though file types are same, the codecs can be different. Specifying a codec along with the type attribute allows the browser access only the codec which it can read. This gives a heads up to the browser so that if it can’t read it not to try loading it. Using the codec attribute with the type attribute speeds up the process and cuts out any unnecessary calls.

Listing 8: codec attribute

<audio controls>
<source src=”jazz.ogg” type=”audio/ogg; codecs=vorbis”>
<source src=”jazz.spx” type=”audio/ogg; codecs=speex”>
<source src=”jazz.oga” type=”audio/ogg; codecs=flac”>
</audio>

The above listing shows various codecs for an ogg file.

I hope you liked the article, see you next time.



I am a Senior Web Developer from London with over 5years of experience in ASP.NET, HTML, CSS. I am well versed in VB.Net, C# and SQL as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login