HTML5 audio Tag: use with javascript

In the previous tutorial, we can know the audio file types which HTML audio tag supports and some attributes of the audio tag.

We have many questions.

First: how to detect which format the browser supports?

We can use the library Modernizr to detect this.

Modernizr.audio.mp3

Modernizr.audio.ogg

Modernizr.audio.m4a

Modernizr.audio.wav

Example: Javascript

var extension = Modernizr.audio.mp3 ? "mp3" : 
				Modernizr.audio.ogg ?"ogg" :
				Modernizr.audio.wav ?"wav" : "m4a",
    basePath = "http://demo.tutorialspots.com/html5/audio/",
	name = "T.I - Hello Acapella SAMPLE DIYACAPELLAS",
	path = basePath + name + "." + extension,
    sound = document.createElement('audio');

sound.preload = "auto";
sound.autobuffer = true;
sound.src = path;
sound.load(); //load the audio file
sound.play(); //play the audio file

(Note: use external resource: Modernizr)

Result: http://jsfiddle.net/sans_amour/csxy3tLa/

Second question: how to manipulate the audio?

In the previous example, we can play a audio file by using javascript.

sound.play();

sound is the audio element.

We also can control the audio like pause, volume down/up and forward/backward. The example below show how to pause the audio:
HTML:

<input type="button" value="Play" id="playAudio" />
<input type="button" value="Pause" id="pauseAudio" />

JS:

var extension = Modernizr.audio.mp3 ? "mp3" : 
				Modernizr.audio.ogg ?"ogg" :
				Modernizr.audio.wav ?"wav" : "m4a",
    basePath = "http://demo.tutorialspots.com/html5/audio/",
	name = "T.I - Hello Acapella SAMPLE DIYACAPELLAS",
	path = basePath + name + "." + extension,
    sound = document.createElement('audio');

sound.preload = "auto";
sound.autobuffer = true;
sound.src = path;
sound.load(); //load the audio file

document.getElementById("pauseAudio").onclick = function (){
    sound.pause();
}

document.getElementById("playAudio").onclick = function (){
    sound.play();
}

Result:
http://jsfiddle.net/sans_amour/sgs99qjq/1/

Example 3: add control volume.
HTML:

<input type="button" value="Play" id="playAudio" />
<input type="button" value="Pause" id="pauseAudio" />
<input type="button" value="Volume down" id="volumeDown" />
<input type="button" value="Volume up" id="volumeUp" />

JS:

var extension = Modernizr.audio.mp3 ? "mp3" : 
				Modernizr.audio.ogg ?"ogg" :
				Modernizr.audio.wav ?"wav" : "m4a",
    basePath = "http://demo.tutorialspots.com/html5/audio/",
	name = "T.I - Hello Acapella SAMPLE DIYACAPELLAS",
	path = basePath + name + "." + extension,
    volumeStep = 0.2,
    sound = document.createElement('audio');

sound.preload = "auto";
sound.autobuffer = true;
sound.src = path;
sound.load(); //load the audio file

document.getElementById("pauseAudio").onclick = function (){
    sound.pause();
}

document.getElementById("playAudio").onclick = function (){
    sound.play();
}

document.getElementById("volumeDown").onclick = function (){
    sound.volume -= volumeStep;
}

document.getElementById("volumeUp").onclick = function (){
    sound.volume += volumeStep;
}

Result:
http://jsfiddle.net/sans_amour/sgs99qjq/2/

Example 4: add forward/backward and stop control:

<input type="button" value="Play" id="playAudio" />
<input type="button" value="Pause" id="pauseAudio" />
<input type="button" value="Volume down" id="volumeDown" />
<input type="button" value="Volume up" id="volumeUp" />
<input type="button" value="Forward" id="Forward" />
<input type="button" value="Backward" id="Backward" />
<input type="button" value="Stop" id="stopAudio" />

Javascript:

var extension = Modernizr.audio.mp3 ? "mp3" : 
				Modernizr.audio.ogg ?"ogg" :
				Modernizr.audio.wav ?"wav" : "m4a",
    basePath = "http://demo.tutorialspots.com/html5/audio/",
	name = "T.I - Hello Acapella SAMPLE DIYACAPELLAS",
	path = basePath + name + "." + extension,
    volumeStep = 0.2,
    timeStep = 5,
    sound = document.createElement('audio');

sound.preload = "auto";
sound.autobuffer = true;
sound.src = path;
sound.load(); //load the audio file

document.getElementById("pauseAudio").onclick = function (){
    sound.pause();
}
document.getElementById("playAudio").onclick = function (){
    sound.play();
}
document.getElementById("volumeDown").onclick = function (){
    sound.volume -= volumeStep;
}
document.getElementById("volumeUp").onclick = function (){
    sound.volume += volumeStep;
}
document.getElementById("Forward").onclick = function (){
    sound.currentTime += timeStep;
}
document.getElementById("Backward").onclick = function (){
    sound.currentTime -= timeStep;
}
document.getElementById("stopAudio").onclick = function (){
    sound.pause();
    sound.currentTime = 0;
}

Result:

http://jsfiddle.net/sans_amour/sgs99qjq/3/