Audio tag in HTML5

Audio tag

 

This new element allows you to deliver audio files directly through the browser, without the need for any plug-ins. embedding the audio file into a web page via the src attribute. The Audio tag is a new tag introduced in HTML5. You can use it to play audio sound like .mp3, wav, and .ogg. I have used five types of sound formats to show which formats are compatible with browsers. A WAV file is a common sound that is supported by most browser versions.

 

Syntax

 

<audio src="URL" controls>  </audio>

 

Syntax for more than one audio format

 

<audio controls="controls" >
        <source src="URL1" type="audio/mp3" />
        <source src="URL2" type="audio/wma" />
        <source src="URL3" type="audio/x-wav" />
</audio>

 

<audio> is supported by all of today's latest browsers, including mobile browsers for iOS 4+, Android 2.3+ and Opera Mobile 11+.

 

You can find a guide to it here: http://msdn.microsoft.com/en-us/hh550090

 

Figure1

 

The Easiest Way to Add Audio to Your Site

 

To add a simple audio player to your web page, all you need is a single line of markup.

<audio src="audio.mp3" type="audio/mp3" controls="controls">

This includes the src attribute. which embeds the specified audio file into the page. It also includes the controls attribute, which tells the browser to use its default control interface for audio.

 

Figure 2

 

Attributes

 

<audio> has several other attributes beyond src and controls  you can utilize to further modify how your audio file will load and play.

 

autoplay

 

This is a Boolean attribute indicating whether or not the file should start playing audio as soon as it can. or, An audio file that will automatically start playing.

 

Syntax

 

<audio autoplay="autoplay">

 

For example

 

First, we see without the AutoPlay attribute that will not automatically start playing.

<audio controls="controls">
    <source src="sound/cartoonimpactwav.wav" type="audio/x-wav" />
</audio>

Figure 3

 

Now, see with AutoPlay attribute that will automatically start playing.

<audio controls="controls" autoPlay="autoPlay">
    <source src="sound/cartoonimpactwav.wav" type="audio/x-wav" />
</audio>

Figure 4

 

crossorigin

 

crossorigin is used to indicate if an audio file is being served from a different domain. This is a very new attribute introduced for all media elements (<video> and <img> too) to address playback issues with Cross-Origin Resource Sharing (CORS).

<audio src=" sound/cartoonimpactwav.mp3" controls crossorigin="anonymous"></audio>

loop

 

Another Boolean attribute, loop, tells the browser to loop the audio when playing. A song that will start over again, every time it is finished.

<audio controls="controls" autoplay loop>
    <source src="sound/cartoonimpact.mp3" type="audio/mp3" />
    <source src="sound/cartoonOGG.ogg" type="audio/ogg" />
    <source src="sound/cartoonimpact.aac" type="audio/aac" />
    <source src="sound/cartoonimpact.wma" type="audio/wma" />
    <source src="sound/cartoonimpactwav.wav" type="audio/x-wav" />
</audio>

When we open it that will start and after finish, it will start again by using a loop attribute.

 

mediagroup

 

mediagroup is another relatively new attribute that is used to tie together multiple media files for synchronized playback.

<audio controls="controls" mediagroup="Name">
    <source src="sound/cartoonimpactwav.wav" type="audio/x-wav" />
</audio>

muted

<audio src="sound/cartoonimpact.mp3" controls muted></audio>

The Boolean attribute muted does just what it says mutes the audio file upon initial play.

 

Preload

 

If a user wants that the song should NOT be loaded when the page loads. The preload attribute specifies if and how the author thinks that the audio file should be loaded when the page loads.

 

Attribute Values

1. auto - The author thinks that the browser should load the entire audio file when the page loads
2. metadata - The author thinks that the browser should load only metadata when the page loads
3. none - The author thinks that the browser should NOT load the audio file when the page loads

<audio controls="controls" preload="none">
    <source src="sound/cartoonimpact.mp3" type="audio/mp3" />
    <source src="sound/cartoonOGG.ogg" type="audio/ogg" />
    <source src="sound/cartoonimpact.aac" type="audio/aac" />
    <source src="sound/cartoonimpact.wma" type="audio/wma" />
    <source src="sound/cartoonimpactwav.wav" type="audio/x-wav" />
</audio>

Source

 

The best way to coerce browsers into playing audio (or video, for that matter) is to use the <source> element. The browser will try to load the first audio source, and if it fails or isn't supported, it will move on to the next audio source. To declare multiple audio files, you first drop the src attribute <audio>. Next, you nest child <source> elements inside <audio>.

<audio controls="controls" >
    <source src="sound/cartoonimpact.mp3" type="audio/mp3" />
    <source src="sound/cartoonOGG.ogg" type="audio/ogg" />
    <source src="sound/cartoonimpact.aac" type="audio/aac" />
    <source src="sound/cartoonimpact.wma" type="audio/wma" />
    <source src="sound/cartoonimpactwav.wav" type="audio/x-wav" />
</audio>

This table details the codecs supported by today's browsers

 

Figure5

 

To create our own controls, we can use the API methods defined by the spec:

1. play()- plays the audio
2. pause()- pauses the audio
3. canPlayType()- interrogates the browser to establish whether the given mime type can be played
4. buffered() - attribute that specifies the start and end time of the buffered part of the file

Flash Fallback

 

As I mentioned, <audio> fallback content can include HTML. And that means it can include a Flash <object> for browsers that don't support <audio>:

<audio controls="controls" >
    <source src="sound/cartoonimpact.mp3" type="audio/mp3" />
    <source src="sound/cartoonOGG.ogg" type="audio/ogg" />
    <source src="sound/cartoonimpact.aac" type="audio/aac" />
    <source src="sound/cartoonimpact.wma" type="audio/wma" />
    <source src="sound/cartoonimpactwav.wav" type="audio/x-wav" />
    <object data="mediaplayer.swf?audio=sound/cartoonimpact.mp3">
        <param name="songs" value="mediaplayer.swf?audio=sound/cartoonimpact.mp3">
        </object>
    </audio>

In this example, the browser will first check if it supports <audio>. If it doesn't, it will fall back to the Flash audio player (provided the plug-in is installed).

 

If the browser does support <audio>, it will proceed through the <source> elements until it finds a supported format. In the event no supported format is listed, the browser will fall back to the Flash player (again, if the plug-in is installed).