모바일 사파리에서 HTML5 오디오 객체 재사용

Question

이벤트 및 오디오 재생 간의 대기 시간을 최소화하면서 iPad의 모바일 사파리에서 실행되는 웹 앱에서 사용자 입력에 대한 응답으로 짧은 (1 초 미만) 오디오 파일을 재생하고 싶습니다. 페이지 재로드 사이에서 재생이 여러 번 트리거 될 수 있으므로 오디오 파일을 캐시하고 싶습니다.

다음 첫 번째 클릭에 파일을 재생하지만없는 것보다는시 이후 발생합니다

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

나는 내가 같은에서 두 개의 플레이 백을받을 수있는 파일을 다시로드 이벤트 "종료"에 이벤트 리스너를 추가하는 경우 객체 후 침묵 :

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

: 내가 수동으로 다음과 같이 0으로 currentTime을 속성을 설정하면

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

나는 오류 콘솔에서 다음과 같은 오류 얻을

:이 작업을하는 방법에 대한

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

어떤 아이디어? 미리 감사드립니다.

Answer 1

나는 정확히 같은 문제가있었습니다. 이 더러운 트릭하지만 사운드 객체에 SRC를 재설정하는 것은 나를 위해 일한 :

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

Answer 2

그렇지는 ended 이벤트를 깰 것 load()를 사용하지 않는 대신 제로의 0.1에 currentTime을 설정합니다.

당신이 미디어 파일의 사용을 미리로드해야하는 경우 :이 시도

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