Riproduci (e riproduce) un suono su safari mobile

Question

Ho bisogno di riprodurre un suono quando un nuovo messaggio appare su un sito web. Funziona bene su Chrome e Safari ma non riesco a farlo funzionare su Safari mobile. ho visto che il suono deve essere inizializzato con un azione dell'utente in modo che ho provato:

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

Purtroppo, il suono ancora non giocare. Ho anche provato con la libreria Buzz e il problema è lo stesso.

Quindi, la domanda è: come posso riprodurre un suono a livello di programmazione sui browser mobili?

Answer 1

Prima di tutto: il supporto audio HTML5 in Mobile Safari su iOS (5.01, 5.1) è rather limited. Ma sono riuscito a far funzionare alcuni piccoli suoni di "tipo evento" nelle mie app web per iPad 2. Dato che stai parlando di un solo file audio per la tua app, non devi ricorrere a trucchi sprites audio (cioè unire più file MP3 in un file MP3 e modificare la posizione di riproduzione all'interno del file unito a seconda del suono che desideri essere giocato).

Come notato, non è possibile riprodurre automaticamente l'audio in Safari mobile, ovvero senza che l'utente faccia clic su alcun elemento. Tecnicamente parlando, l'audio deve essere riprodotto (non caricato) nello stesso stack di chiamate di un evento click. Ma probabilmente sperimenterai un ritardo di 0,5 secondi quando Mobile Safari crea l'oggetto audio. Ecco una soluzione a questo 'problema':

• All'inizio della vostra applicazione (durante il caricamento/inizializzazione), aggiungere un gestore clicca per il documento HTML che inizia a riprodurre il file audio non appena l'utente fa clic/tocca ovunque nell'app. Questo costringerà Safari ad iniziare a caricare l'audio.
• Ascolta per l'evento "riproduzione" che viene attivato quando l'audio è pronto per essere riprodotto e immediatamente messo in pausa.
• Ora inizia a riprodurre l'audio (senza indugio) di nuovo quando è necessario.

Ecco po 'di codice JavaScript rapida:

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

Per coloro che stanno arrivando in questo problema e la soluzione di Jeroen non funziona Ecco una soluzione che funziona e garantisce la scoping corretta viene applicato correttamente .

Assicurarsi che initAudio venga chiamato al caricamento della pagina. Cioè nella tua funzione Init o jquery all'interno del documento.ready ($ (function() {});)

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