Using JavaScript to Control the Playback of Audio Tag in HTML5

Output in Browser:

Now to apply the action in the above HTML Markup, we need to write some JavaScript. Find the JavaScript methods below:

<script type="text/javascript">
// Global variable to track current file name.
var currentFile = "";
function playAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
var btn = document.getElementById('play');
var audioURL = document.getElementById('audiofile');

//Skip loading if current file hasn't changed.
if (audioURL.value !== currentFile) {
oAudio.src = audioURL.value;
currentFile = audioURL.value;
}

// Tests the paused attribute and set state.
if (oAudio.paused) {
oAudio.play();
btn.textContent = "Pause";
}
else {
oAudio.pause();
btn.textContent = "Play";
}
}
catch (e) {
// Fail silently but show in F12 developer tools console
if (window.console && console.error("Error:" + e));
}
}
}
// Rewinds the audio file by 30 seconds.

function rewindAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime -= 30.0;
}
catch (e) {
// Fail silently but show in F12 developer tools console
if (window.console && console.error("Error:" + e));
}
}
}

// Fast forwards the audio file by 30 seconds.

function forwardAudio() {

// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime += 30.0;
}
catch (e) {
// Fail silently but show in F12 developer tools console
if (window.console && console.error("Error:" + e));
}
}
}

// Restart the audio file to the beginning.

function restartAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime = 0;
}
catch (e) {
// Fail silently but show in F12 developer tools console
if (window.console && console.error("Error:" + e));
}
}
}
</script>

If you know the JavaScript, then you will not find any difficulties to understand above methods.

Now, let's see the <audio> tag in action.

Note: Download the attached project to test and you need an internet connection because I am using a remote server to get the audio file.

Credit: http://msdn.microsoft.com/en-us/library/ie/gg589529%28v=vs.85%29.aspx

I hope you like it. Thanks.