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

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

• javascript
• jquery
• iphone
• html
• ios

3 Answers 3

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

My solution is similar to the accepted answer but I'm posting it in case others find it more readable/workable:

<script>

    //save the sound to play
    var sound=new Audio('sound.mp3');

    //start listening for a mousedown or touchstart event (the later needed for ios)
    $(window).bind('mousedown touchstart',function() {
        //turn down the volume
        sound.volume=0;
        //iOS needs muting set to true 
        sound.muted=true;
        //play the sound on mute
        sound.play();

        console.log("played sound on mute");

        //only need to do this once.  we can unbind these two events when done.
        //rework this if you have mousedown or touchstart bindings for other purposes
        $(window).unbind('mousedown');
        $(window).unbind('touchstart');
    });

    //play the sound after 10 seconds.
    //this is just to test to see if auto-playing works.
    //you'd actually be putting the inside parts of this into some other function
    setTimeout(function(){ 
        //make sure sound is back on
        sound.volume=1;
        sound.muted=false;
        //play the sound
        sound.play();
    },10000);

</script>

Your best bet would be to use a media player that has a javascript API. Something like:-

http://www.schillmania./projects/soundmanager2/

This allows you to play files from javascript and it uses either html5 or flash so Safari wouldn't be able to block an event triggering it.