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

15 Responses

  1. 1 GS

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

  2. 2 Adrian

    Thank you.
    It works on the iPad

  3. 3 Steve Jobs

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

    Evil 1 – Users 0

  4. 4 balaji

    Hi,

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

  5. 5 PHD

    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

    Thank you

  7. 7 aditya

    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

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

  9. 9 SK

    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

    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

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

  12. 12 yogesh

    Im getting an error not working

  13. 13 canada goose parka

    To make ears, cut each large marshmallow crosswise into 5 pieces with kitchen scissors
    canada goose parka

  14. 14 Zachery

    This post is very informative but it took me a long time to find it in google.
    I found it on 21 spot, you should focus on quality
    backlinks building, it will help you to increase traffic.
    And i know how to help you, just search in google –
    k2 seo tips and tricks

  1. 1 Hands-On Apple IPhone 4 und iPad – HTML5 Audio | Akustikkoppler

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.