Add custom functions to the html5 audio element for better functionality

Html5 Audio

The html5 audio element provides a simple api to play sound files like mp3, ogg, wav etc. It can be created by putting an audio tag in the html or by creating an instance of the Audio object in javascript. Here is a quick example of using it from within javascript code.

var aud = new Audio();
aud.src = 'path/to/song.ogg';

aud.play();

That much of code would load the file specified in the src path and play it. There are additional functions and properties that can be used to pause, change volume etc.

The Hacks

1. Stop Function

The Audio element does not come with a stop function. However its easy to give it one like this.

//Give the Audio function a stop function
HTMLAudioElement.prototype.stop = function()
{
	this.pause();
	this.currentTime = 0.0;
}

The above will add a stop function to audio elements. It first pauses and then resets the time to 0.0

var aud = new Audio();
aud.src = 'background.ogg';
aud.play();

//stop it
aud.stop();

2. Check if audio is playing or not

The ispaused attribute can be used to check if the audio element is currently playing or not. Here is how

//Function to check if audio is playing or not
HTMLAudioElement.prototype.is_playing = function()
{
	return !audelem.paused;
}

Now call the is_playing function on any audio element to check if its playing or not.

3. Correct pause detection

The problem with the 'paused' attribute of the audio element is that it is set to true even when the audio file has not started playing at all, either its in stopped state. When programming games for example its important to check which audio files are currently paused and resume their playback. Therefor a handy hack is to add our own pause functionality like this

//pause and mark a pause only variable
HTMLAudioElement.prototype.real_pause = function()
{
	this.pause();
	this.really_paused = true;
}

//Unpause a really paused audio
HTMLAudioElement.prototype.unpause = function()
{
	if(this.really_paused == true)
	{
		this.play();
		this.really_paused = false;
	}
}

So the 'really_paused' attribute can be used to check if the audio was really paused while playing. And the accompanying unpause function unpauses a really paused audio element.

Packup

So the above hacks can be packed up in your js code somewhere at the top.

//Hack the Audio element if its defined
if(typeof HTMLAudioElement != 'undefined')
{
	//Give the Audio function a stop function
	HTMLAudioElement.prototype.stop = function()
	{
		this.pause();
		this.currentTime = 0.0;
	}
	
	//pause and mark a pause only variable
	HTMLAudioElement.prototype.real_pause = function()
	{
		this.pause();
		this.really_paused = true;
	}
	
	//Unpause a really paused audio
	HTMLAudioElement.prototype.unpause = function()
	{
		if(this.really_paused == true)
		{
			this.play();
			this.really_paused = false;
		}
	}
	
	//Function to check if audio is playing or not
	HTMLAudioElement.prototype.is_playing = function()
	{
		return !audelem.paused;
	}
}

If you got any other cool function to add to it, let us know.