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:
js control audio
http://jsfiddle.net/sans_amour/sgs99qjq/3/

To forward or backward, we change currentTime property.
To stop the audio, we pause the audio and change currentTime property to zero.

Leave a Reply