Play a sound via javascript event in iOS 5 HTML5 app

5
votes

Developing an HTML 5 application on new iPad's Mobile Safari iOS 5 that displays a user prompt when a "dispatch" is received. To bring attention to the user, we have a sound that plays like this when a alert function is called:

snd.src = snd.src;
snd.play();

Unfortunately, Apple changed the methodology for playing sounds. Does anyone know if there are updates in iOS 5 that fixes this?

*Did a lot of research and already aware that the old "hack" in iOS 3 no longer works.

1
javascriptjquerymobile-safariios5

1 Answers

15
votes

The sounds require user input in iOS5. You can initialize the sound with an "invisible" button that disappears after one press at the initialization of your app. Once triggered, you should be able to call snd.play() programatically. It's kind of a cheat, but hopefully it helps!

Javascript:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {

    document.write('<a id="init" ontouchstart="javascript:sndInit();"></a>');

    function sndInit(){
    snd.play();
    snd.pause();
    document.getElementById('init').style.display = 'none';
    }
}

CSS:

<style>
    #init {
        position: absolute;
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        z-index: 1000;
    }
</style>

Also, Remy Sharp has some tips on working with audio sprites HERE.