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 for 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.

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 indicate whether or not the file should start playing audio as soon as it can. or, An audio file that will automatically start playing.

Syntax

For example

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

</audio>

Figure 3

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

</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).

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>

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

mediagroup

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

</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. T

Preload

If user want 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

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

</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>

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:

play()- plays the audio
pause()- pauses the audio
canPlayType()- interrogates the browser to establish whether the given mime type can be played
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>:

</object>

</audio>

In this example, the browser will first check if it supports <audio>. If it doesn't, it will fallback 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 fallback to the Flash player (again, if the plug-in is installed).

Pages

Thursday, 14 March 2013