DOMException: The play() request was interrupted

最近在使用audio時遇到一個問題，那就是在Chrome DevTools 老是報錯：

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

or

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

報錯：

除了google瀏覽器，其餘瀏覽都沒有報錯。 並且雖然報錯，其實仍是能正常播放聲音，原本想就這樣了，可是看到有報錯。總有一點膈應。

後來google了一下 發現是由於調用play()的時候，音頻文件尚未加載完成的問題。

以前代碼：

知道了是這個問題，那麼如何修復呢？

例子：Autoplay

<video id="video" preload="none" src="https://example.com/file.mp4"></video>

<script>
  // Show loading animation.
  var playPromise = video.play();

  if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
</script>

經過這個例子已經可以解決問題，

可是新的問題來了，promise在低版本的瀏覽器不支持。

Chrome 50纔有 video和audio纔在play()上面返回了一個promise;

而後我又看到了這個例子。

例子2：Fetch & Play

<video id="video"></video>
<button id="button"></button>

<script>
  button.addEventListener('click', onButtonClick);

  function onButtonClick() {
    // This will allow us to play video later...
    video.load();
    fetchVideoAndPlay();
  }

  function fetchVideoAndPlay() {
    fetch('https://example.com/file.mp4')
    .then(response => response.blob())
    .then(blob => {
      video.srcObject = blob;
      return video.play();
    })
    .then(_ => {
      // Video playback started ;)
    })
    .catch(e => {
      // Video playback failed ;(
    })
  }
</script>

經過這兩個例子，我在想 用Fetch低版本仍是不兼容。因而乎我就想用$.ajax, 由於他的本意不就是一個異步麼。先用阿賈克斯請求音頻文件，而後在回調裏面調用play方法不就能夠了麼。

然而卻被現實啪啪的打臉。仍是不行 報一樣的錯。說明此路不通啊。

沒辦法我就只能再請教google, 而後我在GitHub上面看到有人這樣說；

發現這也能夠。因而我就把個人代碼改了一下：

// 播放聲音
function playVoice(src, domId) {
    var $dom = $('#' + domId)
    if ($.browser.msie) {
        // IE用bgsound標籤處理聲音

        if ($dom.length) {
            $dom[0].src = src;
        } else {
            $('<bgsound>', {src: src, id: domId}).appendTo('body');
        }
    } else {
        // IE之外的其它瀏覽器用HTML5處理聲音
                if ($dom.length) {
                     $dom[0].load();
                    setTimeout(function() {
                        $dom[0].play();
                    }, 200);
                } else {
                    $('<audio src='+src+' id='+domId +' controls autoplay preload="auto">').appendTo('body')[0].load();
                    playVoice(src, domId);
                }
    }
}

你們一看也就明白了，就是先load，而後異步去調用play,可是我用0，在我刷新快，頻繁的時候仍是會報錯、因而我就改爲200ms,至於延時器裏面的200ms，我也是本身大概寫了一個數字.

以上問題暫時解決。

參考文章：
(https://developers.google.com...

(https://github.com/sampotts/p...