Play (and play) sound on a safari mobile

Question

I need to play a sound when a new message appears on the website. It works fine in Chrome and Safari, but I can't get it to work on Safari mobile. I saw that the sound should be initialized with a user action, so I tried this:

var sound = new Audio('./path/to/my/sound.mp3'); var hasPlayed = false; $('body').bind('click touchstart', function() { sound.load(); }); sound.addEventListener('play', function() { hasPlayed = true; }); var playSound = function() { if(hasPlayed) { sound.currentTime = 0; } sound.play(); } 

Unfortunately, the sound is still not playing. I also tried with the Buzz library and the problem remains the same.

So the question is: how can I programmatically play sound in mobile browsers?

Answer 1

First of all: Support for HTML5 audio in Mobile Safari on iOS (5.01, 5.1) is quite limited . But I managed to get some small sounds, such as events, that work in my iPad 2 IP applications. Since you are talking about only one audio file for your application, you do not need to return to the tricks of audio sprites (for example, merging several MP3s into one MP3 file and changing the playback position in the combined file depending on the sound you want to play).

As you noticed, you cannot automatically play audio in Mobile Safari, i.e. without the user clicking an item. Technically speaking, sound should be played (not loaded) in the same call stack as the click event. But you are likely to experience a delay of 0.5 seconds when Mobile Safari creates an audio object. Here is the solution to this "problem":

• At the beginning of your application (during loading / initialization) add a click handler to the HTML document that will start playing your audio file as soon as the user clicks / writes anywhere in the application. This will cause Safari to start loading the sound.
• Listen to the play event, which fires when the sound is ready to play and pauses immediately.
• Now start playing the sound (without delay) again when you need it.

Here is a little JavaScript code:

 function initAudio() { var audio = new Audio('./path/to/my/sound.mp3'); audio.addEventListener('play', function () { // When the audio is ready to play, immediately pause. audio.pause(); audio.removeEventListener('play', arguments.callee, false); }, false); document.addEventListener('click', function () { // Start playing audio when the user clicks anywhere on the page, // to force Mobile Safari to load the audio. document.removeEventListener('click', arguments.callee, false); audio.play(); }, false); } 

Answer 2

For those who are facing this problem and the Jeroen solution is not working, it is a solution that works and ensures that the correct area is applied correctly.

Make sure initAudio is called when the page loads. That is, in the Init function or for jquery inside document.ready ($ (function () {});)

 function initAudio(){ var audio = new Audio('./path/to/my/sound.mp3'); var self = this; //not sure if you need this, but it better to be safe self.audio = audio; var startAudio = function(){ self.audio.play(); document.removeEventListener("touchstart", self.startAudio, false); } self.startAudio = startAudio; var pauseAudio = function(){ self.audio.pause(); self.audio.removeEventListener("play", self.pauseAudio, false); } self.pauseAudio = pauseAudio; document.addEventListener("touchstart", self.startAudio, false); self.audio.addEventListener("play", self.pauseAudio, false); }