HTML 5 Audio

In this article we are going to discuss about the html5 audio element. As like other media elements like video, audio is also an element of html5 media family. So it is quite easy to add JavaScript code, CSS etc with this.
We will start this tutorial with a simple example of audio element.
By using this element we can insert audio in a web page. For that we have to just mention the source of the audio file.
We will build our 1st audio player with a sample ogg audio. (You can download a sample ogg audio from http://www.2shared.com/audio/ZANXAtx2/sample.html)
Or you can just mention the url of any audio file.
I have downloaded a ogg file, and put it in a folder named audio. Now just have to mention the source path of the audio file with type of file. The type of file is used to tell the browser that what type of audio file is it. The coding section looks like,

<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="audio/Example.ogg" type="audio/ogg">
</audio>
</body>
</html>

the code is pretty simple. Under the audio tags, the source tag is mentioned with the source path & type of audio file.

Mainly 3 types of audio format supports by the latest browsers. They are,
1) WAV (Most of the browsers support this)
2) MP3
3) OGG
Now, lets concentrate on the different attributes of audio tag in html 5.
1> controls : the controlling features of an audio player is implemented using control attribute, like, the play, pause button, progress bar, volume control etc.
2> autoplay : this attributes is used for playing an audio automatically just after the page finishes loading. The syntax looks like,
<audio autoplay=”autoplay” controls=”controls”>
3> loop : the audio will be played back just after it finishes, just like looping.
Till now we have learned how to use audio tag to play some music through web browser using html5.
Now lets do some cool stuff.
We will create a audio player with animated image & control bar using JQuery with html 5.
In the previous tutorials of html5 we have introduced with html 5 & came to know that audio element is a part of html5 family. so if we want to implement JQuery with html5 there is absolutely no problem for integration.
We will use JQuery function for the player control options, the movement of progress bar etc.
From the html page, we will just call those function as required.
Additionally, we will add CSS file, for adding images & styling.
Lets look at the html source code,

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="HTML5 Audio Player: A customized jPlayer HTML5 audio interface" />
<meta name="keywords" content="HTML5, Audio, Player, jQuery, Animated GIF" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- Here js files are added -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="lib/music.js"></script>
<title>HTML5 Audio Player</title>
</head>
<body>
<div id="header">
<div class="clear"></div>
</div>
<div id="topplayer">
<div class="wrap">
<h2>HTML5 <span>Audio Player</span></h2>
<div id="jquery_jplayer"></div>
<div class="jp-single-player">
<div class="jp-interface">
<ul class="jp-controls">
<li><a href="#" id="jplayer_play" tabindex="1">play</a></li><!-- For playing audio -->
<li><a href="#" id="jplayer_pause" tabindex="1">pause</a></li><!-- For pause audio -->
<li><a href="#" id="jplayer_stop" tabindex="1">stop</a></li><!-- For stop playing -->
</ul>
<div class="jp-progress"><!-- This is for the progress bar -->
<div id="jplayer_load_bar">
<div id="jplayer_play_bar"></div>
</div>
</div>
<div id="jplayer_volume_bar"> <!-- This is for the volume bar at the top right corner -->
<div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
</div>
<div id="jplayer_play_time"></div> <!-- This is for the current playing time -->
<div id="jplayer_total_time"></div> <!-- This is for the total playing time -->
</div>
<div class="shadow"></div>
<div id="jplayer_playlist"> <!-- This is for the shadow under the progress bar -->
</div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>

html5 audio docu1
We have used 3 JavaScript files,
1. jquery.min.js (we have provided the link for this)
2. jquery.jplayer.min.js (fetched from lib folder)
3. music.js (fetched from lib folder)
In the music.js, we have mentioned the audio file with two formats.We have downloaded the file and kept it in a folder called ‘audio’.

$("#jquery_jplayer").jPlayer({
		ready: function () {
			this.element.jPlayer("setFile", "audio/Sample_audiomp3", "audio/Sample_audio.ogg").jPlayer("pause");
	},
	volume: 80,
	oggSupport: true,
	preload: 'yes'
})

In the CSS file, we have mentioned the backgroung image,

body {
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: small;
	cursor: default;
	background: #000 url(../img/background0172.jpg) top center no-repeat;
	color: #343434;
}

& the animated gif.

div.jp-play-bar {
	background: url("../img/animatfD.gif") top center repeat;
	width:960px;
	height:435px;
}

So, you can customize all these as you want.

If you find this article helpful, you can connect us in Google+ and Twitter.

Want to get blog updates? Subscribe here

[newsletter_form

Enter your email address:

Delivered by FeedBurner

1 thought on “HTML 5 Audio

Leave a Reply

Your email address will not be published. Required fields are marked *