[javascript] “pause () 호출로 인해 play () 요청이 중단되었습니다”오류를 방지하는 방법은 무엇입니까?

Program / 글쓴이

사용자가 클릭하면 소리가 나는 웹 사이트를 만들었습니다. 사운드가 겹치는 것을 방지하기 위해 코드를 추가해야했습니다.

n.pause();
n.currentTime = 0;
n.play();

그러나 그로 인해 오류가 발생합니다.
The play() request was interrupted by a call to pause()

사운드 이벤트가 다른 트리거 직후에 트리거 될 때마다 나타납니다. 소리는 여전히 잘 재생되지만이 오류 메시지가 계속해서 표시되는 것을 방지하고 싶습니다. 어떤 아이디어?

답변

최근에도이 문제가 발생했습니다.이 문제는 play()과 사이의 경쟁 조건 일 수 있습니다 pause(). 이 문제에 대한 언급이 있거나 여기에 관련된 내용이있는 것 같습니다 .

으로 @Patrick는 지적, pause위의 반응 용액 작동하지 않습니다, 약속 (또는 아무것도를) 반환하지 않습니다. MDN에는에 문서가 없지만 Media Elementspause() 에 대한 WC3 초안 에서 다음 과 같이 말합니다.

media.pause ()

paused 속성을 true로 설정하고 필요한 경우 미디어 리소스를로드합니다.

따라서 paused타임 아웃 콜백에서 속성을 확인할 수도 있습니다 .

이 훌륭한 SO 답변을 기반으로 비디오가 실제로 재생되는지 여부를 확인할 수있는 방법이 있으므로 오류없이 안전하게 play ()를 트리거 할 수 있습니다.

var isPlaying = video.currentTime > 0 && !video.paused && !video.ended
    && video.readyState > 2;

if (!isPlaying) {
  video.play();
}

그렇지 않으면 @Patrick 의 대답 이 작동합니다.

답변

몇 시간의 검색과 작업 끝에 완벽한 해결책을 찾았습니다 .

// Initializing values
var isPlaying = true;

// On video playing toggle values
video.onplaying = function() {
    isPlaying = true;
};

// On video pause toggle values
video.onpause = function() {
    isPlaying = false;
};

// Play video function
function playVid() {
    if (video.paused && !isPlaying) {
        video.play();
    }
}

// Pause video function
function pauseVid() {
    if (!video.paused && isPlaying) {
        video.pause();
    }
}

그 후에 가능한 한 빨리 재생 / 일시 중지 를 전환 할 수 있으며 제대로 작동 합니다.

답변

나는이 문제를 겪었고 pause ()를 누른 다음 play ()를 눌러야하는 경우가 있지만 pause (). then ()을 사용할 때 정의되지 않습니다.

일시 중지 후 150ms 재생을 시작하면 문제가 해결된다는 것을 알았습니다. (곧 Google이 수정되기를 바랍니다.)

playerMP3.volume = 0;
playerMP3.pause();

//Avoid the Promise Error
setTimeout(function () {
   playerMP3.play();
}, 150);

답변

이 정확한 문제에 대한 기사를 https://developers.google.com/web/updates/2017/06/play-request-was-interrupted 에 게시하여 정확히 무슨 일이 일어나고 있는지, 어떻게 해결 해야하는지 알려 주었습니다 .

답변

시도 해봐

n.pause();
n.currentTime = 0;
var nopromise = {
   catch : new Function()
};
(n.play() || nopromise).catch(function(){}); ;

답변

이 솔루션은 저에게 도움이되었습니다.

n.cloneNode(true).play();

답변

원하는 솔루션의 복잡성에 따라 다음이 유용 할 수 있습니다.

var currentPromise=false;    //Keeps track of active Promise

function playAudio(n){
    if(!currentPromise){    //normal behavior
        n.pause();
        n.currentTime = 0;
        currentPromise = n.play();    //Calls play. Will store a Promise object in newer versions of chrome;
                                      //stores undefined in other browsers
        if(currentPromise){    //Promise exists
            currentPromise.then(function(){ //handle Promise completion
                promiseComplete(n);
            });
        }
    }else{    //Wait for promise to complete
        //Store additional information to be called
        currentPromise.calledAgain = true;
    }
}

function promiseComplete(n){
    var callAgain = currentPromise.calledAgain;    //get stored information
    currentPromise = false;    //reset currentPromise variable
    if(callAgain){
        playAudio(n);
    }
}

이것은 약간 과잉이지만 독특한 시나리오에서 Promise를 처리 할 때 도움이됩니다.