SHARE

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.

NO COMMENTS