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

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');

12 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.

  6. 6 Boggle Jul 12th, 2012 at 2:49 am

    Thank you

  7. 7 aditya Sep 17th, 2012 at 11:08 pm

    This is working in my desktop safari/chrome but sound is not coming in my ipad please help me i want some code that can play a backsound sound automatically on my ipad..

  8. 8 Dean Dec 13th, 2012 at 5:44 pm

    Excellent work! It works great. I wished it worked on the iPhone.
    :)

  9. 9 SK Jan 29th, 2013 at 3:03 am

    Hi,
    This is not working for me.. I have iPad with IOS version greater than 4. Please help me to autoplay sound in iPad.
    In all browsers it works, but not in iPad.

    Kindly help..
    Thank sin advance

  10. 10 jquery each Feb 8th, 2013 at 4:18 pm

    I think this is one of the most vital info for me. And i am glad reading your article. But wanna remark on some general things, The site style is perfect, the articles is really great : D. Good job, cheers

  11. 11 Rob Mar 28th, 2013 at 6:22 pm

    Javascript error in older browsers.

    }else{
    $(“#sound”).remove(); <—————- Object required
    var sound = $("”);
    sound.attr(’src’, url);
    sound.attr(‘loop’, false);
    sound.attr(‘hidden’, true);
    sound.attr(‘autostart’, true);
    $(‘body’).append(sound);

  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.