Home > DeveloperSection > Beginner > Audio element in HTML5

Audio element in HTML5


HTML5 HTML5 
Ratings:
0 Comment(s)
 3569  View(s)
Rate this:

Audio element in HTML5

HTML5 introduced new element <audio>. This element specifies audio file on html document. By using this element user can listen audio file.HTML5 specifies a standard way to add audio file on web page with the help of audio element. <audio> element support three format of audio

1)      Ogg Vorbis : This format is supported by firefox3.5 or later, opera10.5 or later and google chrome 3.0 browser.

2)      MP3: This format will be supported by IE9, google chrome3.0 and safari3.0 or later.

3)      Wav: This format is supported by firefox3.5 or later, opera10.5 or later and safari 3.0 or later.

Syntax to use Audio element in html5

<audio src="source-file location" controls="controls">

 </audio>

Audio element properties

1.       src: In this attribute we have to pass the URL of the audio file.

2.       autoplay:This attribute specifies audio file is ready to play.

3.       loop: This attribute specifies audio file should replay or not.

4.       control: This attribute specifies to show control on page (play/pause/stop button).

5.       preload: This attribute specifies audio file should be preloaded or not.

Following example demonstrate use of audio element in html5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE HTML>    

<html>

<body>

    <audio src="Video/Sleep Away.mp3" controls="controls"></audio>

</body>

</html>

Output of following code snippet is as follows

Audio element in HTML5


Don't want to miss updates? Please click the below button!

Follow MindStick