Sound notification in iOS 5.x in safari browser by js event (for eg. ajax response)

Question

In iOS browser (safari) sounds that are triggered by events are blocked (on ​​click - everything is OK) Does anyone know a working solution - how it can be avoided?

Example: ajax chat message arrived and iphone \ ipad make a sound (the browser is open at the moment and active app)

thank you for your answers

Answer 1

The reason these events are blocked is to avoid any loading of data that is not user-initiated (read Apple's explanation here). That means you need to figure out a way to make the user trigger loading of the audio data. Make the user interact with the page before the meat of your app runs. The initialization could be triggered by something as simple as a "touchstart" fired on document.body, or a button that the user clicks to launch the app (example: have the user click a button that says "start chatting"). In that event's handler, load your audio file to a variable and make it available to the rest of your application. Then in your ajax success handler, play the sound:

HTML

<a id="initbutton">Initialize</a>

JS

var sound;
$('#initbutton').one('click',function(ev){
    sound = new Audio("http://soundjax.com/reddo/61767^ding.mp3"); 
    sound.load(); // load the audio data
    sound.volume=1; // make sure the volume is all the way up, though this doesn't work on iOS
});

$.ajax(...,function(data,status,jqxhr){ //presumably this will be triggered by some other code
    if(sound){
        sound.play()
    }
});

See the example here. Try initializing audio first, then start the ajax loop and vice versa. It will be silent until the audio is loaded.

This has been tested in iOS 5.1 on iPad 2 and iPhone 4S. I don't know if it will work on other devices or in older version of iOS.

I don't know of any other ways to make it work.