Add custom functions to the html5 audio element for better functionality

By | June 30, 2013

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.

About Silver Moon

A Tech Enthusiast, Blogger, Linux Fan and a Software Developer. Writes about Computer hardware, Linux and Open Source software and coding in Python, Php and Javascript. He can be reached at [email protected].

One thought on “Add custom functions to the html5 audio element for better functionality

  1. Bob S.

    Hi – It’s 6-1/2 years since your last update of this page, so I doubt you’ll get this message, but, no try–no reply!

    I’m not super-adept at coding in JS and HTML5, but I’m capable of muddling along. I’ve customized a MEJS_HTML5_Player for my website, which I will use on a new page that will replace a (heavy) page containing 100 instances of this Player — each of which plays a single song — with this new (much lighter) single instance of the Player that has an associated playlist that will be incorporating all of the 100 songs (and generates a vertical scrollbar).

    I’ve been researching for more than a bit now, without success, to try to find a (hopefully simple) way (i.e., java script / html5/ both) to identify the track#/playlist item# of the playlist item/song that is CURRENTLY PLAYING (and/or has just ended…my current code inhibits autoplay of the next item in the playlist – I want a user to have to expressly select each song they want to hear).

    I need to determine this “currently playing” track information so that I can (1) use the track#/playlist line# as the key to a data table record that holds data unique to that currently playing song, and then (2) use the data in the accessed data table record to build a couple of Form Actions for posting, as well as to enable me to make some changes to other items on my website that will correlate to the song being played (like, a link/address to that song-in-play’s specific lyrics html document).

    If you have any ideas on how I can determine the currently-playing song track/playlist item, I’d love to hear them.

    Regards,

Leave a Reply

Your email address will not be published. Required fields are marked *