我如何找到HTML5音頻何時真正開始播放（onplay事件似乎在任何地方都不起作用）

Question

我需要捕捉HTML5音頻開始產生聲音的確切時間。

事實並非如此簡單。

您可能希望在onplay或onplaying事件時開始播放音頻？ 沒門。 至少在WebKit系列中，似乎沒有瀏覽器事件會在此時間點准確觸發。 在Chrome，Safari和Firefox中， onplay和onplaying事件只是通過與oncanplay一起觸發來偽裝它們的行為！

我已經准備了一個簡單的測試來證明這一事實。 它表明所有事件都已經觸發后，音頻實際上會在一段合理的時間（超過100ms-400ms）后開始播放。

如果您查看控制台日志，您會耳目一新。 在日志中，我每15ms輸出currentTime 。 它似乎可以正確反映實際的音頻狀態，並且在觸發任何事件后它會開始更改10-40個輪詢。 因此play后，音頻仍然凍結。

測試代碼如下所示：

    var audioEl = new Audio('http://www.w3schools.com/tags/horse.ogg');

    audioEl.oncanplay = function () {
        console.log('oncanplay');

        audioEl.currentTime = 1;    

        console.log('ready state is: ' + audioEl.readyState);
        audioEl.play();
    }


    audioEl.oncanplay = function () {
        console.log('oncanplay again');
    }

    audioEl.onplay = function() {
        console.log('onplay -----------------');
    }

    audioEl.onplaying = function() {
        console.log('onplaying ----------------');
    }

    setInterval(function () {
        console.log(audioEl.currentTime);
    }, 15);

JsFiddle

我非常需要知道音頻開始播放的確切時間，以便與視覺動畫進行精確同步。

當然，我可以大致使用快速輪詢來找到這一刻。 這對於實時應用程序的性能非常不利，尤其是在移動設備上。

我在問是否有人對此有更好的解決方案。 HTML音頻實施在2014年看起來仍然如此糟糕：(

Answer 1

正如@justin所說，您可以收聽playing事件，以獲取（或多或少）媒體開始實際播放的准確時刻。 但是，是的，我一直在看到一般情況下對媒體事件和readyState支持不一， 甚至在最新的Chrome中也是如此 。

不管這些事件是否有效，我建議不要使用setInterval進行動畫處理（或者其他任何事情）。 而是使用requestAnimationFrame ，它會更頻繁地觸發，並應與瀏覽器和視頻卡的重新繪制同步。 您可以在每幀上輪詢currentTime值，以計算動畫中的位置。 性能不應該成為問題。 您的案例正是 requestAnimationFrame設計目標。

function update() {
    var currentTime = audioEl.currentTime;
    // update your animation here
    requestAnimationFrame(update);
}

update();

在執行此操作時，直到readyState > 0或loadedmetadata事件觸發后，才將currentTime設置為5。 如果您嘗試在瀏覽器加載足夠的視頻文件以了解持續時間之前設置currentTime ，它將拋出錯誤。 但是您可以隨時調用play() 。 它不必等待canplay 。

Answer 2

嘗試使用canplaythrough。 可能會有所幫助，並且最好確保您的音頻可以一直播放到最后。

audioEl.oncanplay = function () {
      console.log('ready state is: ' + audioEl.readyState);
      audioEl.play();
}