Automatically playing audio with HTML5 and Javascript (even on the iPad) 6

July 16, 2010   apple, html, ipad, javascript, jquery

Say you’re building a game with HTML and jQuery and you want to throw in some sound effects. Before HTML5, you had to resort to a pretty hacktacular approach:

$("#sound").remove();
var sound = $("<embed id='sound' type='audio/mpeg' />");
sound.attr('src', 'beep.mp3');
sound.attr('loop', false);
sound.attr('hidden', true);
sound.attr('autostart', true);
$('body').append(sound);

This sucks for a lot of reasons, and it’s going to be a nightmare to build something that uses a lot of sounds.

HTML5 makes it super easy:

var snd = new Audio('beep.mp3');
snd.play();

Unfortunately I couldn’t get this to work on the iPad. After some digging around I found the answer buried in a Stack Overflow thread. You just have to do snd.load() before you call the play() method.

So, here’s some code that will take care of this, with our lame support for older browsers:

function html5_audio(){
	var a = document.createElement('audio');
	return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}
 
var play_html5_audio = false;
if(html5_audio()) play_html5_audio = true;
 
function play_sound(url){
	if(play_html5_audio){
		var snd = new Audio(url);
		snd.load();
		snd.play();
	}else{
		$("#sound").remove();
		var sound = $("<embed id='sound' type='audio/mpeg' />");
		sound.attr('src', url);
		sound.attr('loop', false);
		sound.attr('hidden', true);
		sound.attr('autostart', true);
		$('body').append(sound);
	}
}
 
play_sound('beep.mp3');

6 Responses

  1. 1 GS Aug 4th, 2010 at 8:23 am

    Hi,
    it works pretty well on IPAD, but the audio is looped. is therea a way to set the loop = false?

  2. 2 Adrian Sep 2nd, 2010 at 4:57 am

    Thank you.
    It works on the iPad

  3. 3 Steve Jobs Feb 10th, 2011 at 1:33 pm

    Sorry, but I crushed this loophole. This won’t work anymore.!!

    Evil 1 – Users 0

  4. 4 balaji Aug 3rd, 2011 at 2:41 am

    Hi,

    it doesn’t work in IPAD 4.3.5 pc and Mac browser are support
    help me

  5. 5 PHD Aug 24th, 2011 at 2:22 pm

    If you really want autoplay to work, buy an Android tablet. I was developing a browser based application for project management. Tried to play a beep sound as a reminder for the user, and I was so surprised to found it’s impossible with iPad, finally I had to give up and got a Samsung galaxy pad instead. Now everything is working as expected. Ipad maybe a good toy to kill your time but not for serious jobs.

  1. 1 Hands-On Apple IPhone 4 und iPad – HTML5 Audio | Akustikkoppler Pingback on Jul 21st, 2010 at 8:12 am

Leave a Reply


My name is Joey Nelson. I'm a web developer living in Raleigh, NC and working with Node.js, MongoDB, Ruby, PHP, jQuery and some other stuff. More about me.