Reproducir (y reproducir) un sonido en safari mobile

Question

Necesito reproducir un sonido cuando aparece un nuevo mensaje en un sitio web. Funciona bien en Chrome y Safari, pero no puedo hacerlo funcionar en Safari para dispositivos móviles. vi que el sonido tiene que ser inicializado con una acción del usuario por lo que he intentado:

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

Desafortunadamente, el sonido todavía no juegan. También probé con la biblioteca Buzz, y el problema es el mismo.

Entonces, la pregunta es: ¿cómo puedo reproducir un sonido programáticamente en navegadores móviles?

Answer 1

Primero que nada: la compatibilidad de audio HTML5 en Mobile Safari en iOS (5.01, 5.1) es rather limited. Pero he logrado que funcionen algunos pequeños sonidos de 'tipo de evento' en mis aplicaciones web iPad 2. Como solo está hablando de un archivo de sonido para su aplicación, no tiene que recurrir a trucos de los sprites de audio (es decir, fusionar varios archivos MP3 en un solo archivo MP3 y cambiar la posición de reproducción dentro del archivo fusionado según el sonido que desee ser jugado).

Como habrás notado, no puedes reproducir audio automáticamente en Mobile Safari, es decir, sin que el usuario haga clic en algún elemento. Técnicamente hablando, el audio debe ser jugado (no cargado) en la misma pila de llamadas como un evento de clic. Pero probablemente experimentará un retraso de 0,5 segundos cuando Mobile Safari cree el objeto de audio. Aquí es una solución a este 'problema':

• Al comienzo de su aplicación (durante la carga/inicializar), añadir un controlador de clic al documento HTML que comience a reproducir el archivo de audio tan pronto como el usuario hace clic/toca en cualquier lugar de la aplicación. Esto obligará a Safari a comenzar a cargar el audio.
• Escuche el evento de "reproducción" que se activa cuando el audio está listo para reproducirse, e inmediatamente pause.
• Ahora empiece a reproducir el audio (sin demora) nuevamente cuando lo necesite.

Aquí hay un código rápida JavaScript:

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

Para aquellos que vienen a través de este problema y la solución de Jeroen no está funcionando aquí hay una solución que funciona y garantiza el alcance adecuado se aplica correctamente .

Asegúrese de que se invoca initAudio en la carga de la página. Es decir. en su función de inicialización o para jQuery dentro de la document.ready ((función $() {});)

function initAudio(){ 
    var audio = new Audio('./path/to/my/sound.mp3'); 
    var self = this; 
    //not sure if you need this, but it's 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); 
}