2011-01-25 20 views
12

Chcę odtworzyć krótki (mniej niż 1s) plik dźwiękowy w odpowiedzi na dane wprowadzone przez użytkownika w mojej aplikacji internetowej uruchomionej w przeglądarce Mobile Safari na iPadzie z minimalnym opóźnieniem między odtwarzaniem zdarzenia i dźwięku. Odtwarzanie może być uruchamiane wiele razy między odświeżeniami strony, dlatego chcę buforować plik audio.Ponowne użycie obiektu audio HTML5 w mobilnym Safari

Poniższy odtwarza plik na pierwszym kliknięciem ale po niż nic się nie dzieje:

var audio = new Audio("ack.mp3"); 
$("#button").click(function(e) { 
    e.preventDefault(); 
    audio.play(); 
} 

Jeśli dodać detektor zdarzeń do „zakończony” wydarzenie, które ładuje plik mogę dostać dwa odtworzenia z tego samego celem i ciszy:

var audio = new Audio("ack.mp3"); 
audio.addEventListener('ended', function() { 
    audio.load(); 
}, false); 
$("#button").click(function(e) { 
    e.preventDefault(); 
    audio.play(); 
} 

przypadku ręcznie ustawić atrybut currentTime 0 tak:

var audio = new Audio("ack.mp3"); 
audio.addEventListener('ended', function() { 
    audio.currentTime=0; 
}, false); 
$("#button").click(function(e) { 
    e.preventDefault(); 
    audio.play(); 
} 

pojawia się następujący błąd w konsoli błędów:

INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value. 

jakieś pomysły w jaki sposób dokonać tej pracy? Z góry dzięki

Odpowiedz

3

miałem dokładnie ten sam problem. to świństwo, ale zresetowanie SRC na obiekcie dźwięku pracował dla mnie:

audio.src = audio.src; 
audio.play(); 
+2

próbowałem, ale wydaje się, że trzeba 2s opóźnienie między sztukach. W przeciwnym razie kolejna gra się nie odbędzie. – Crashalot

+0

To też nie działa dla mnie. Nawet w systemie iOS 7 (ostatnia odpowiedź z lutego 2011 r.). –

9

ustawić currentTime do 0.1 zamiast zera, nie używaj load() inaczej będzie przerwać imprezę ended.

jeśli trzeba przekręceniem użycie plików multimedialnych:

media.play(); //start loading 
if(media.readyState !== 4){ //HAVE_ENOUGH_DATA 
    media.addEventListener('canplaythrough', onCanPlay, false); 
    media.addEventListener('load', onCanPlay, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch. 
    setTimeout(function(){ 
    media.pause(); //block play so it buffers before playing 
    }, 1); //it needs to be after a delay, otherwise it will block download and/or won't pause. 
}else{ 
    onCanPlay(); 
}