`canplay` HTML5音頻事件未觸發

Question

我正在嘗試確定何時可以開始播放HTML5音頻元素，以便通知用戶。 我正在使用以下代碼：

<script type="text/javascript">
    var audio = document.getElementById("audio")
</script>

<audio id="audio" hidden loop>
<source src="/static/music/music.mp3" type="audio/mpeg">
<source src="/static/music/music.ogg" type="audio/ogg">
<source src="/static/music/music.wav" type="audio/wav">
No support for HTML5 audio!
</audio>

<div id="playButton" onclick="audio.play();audio.addEventListener('canplay',function() {
    alert("ready!");
});">PLAY</div>

但是，即使按了playButton，警報也不會出現。 我正在使用最新版的Chrome（Chrome 40）

Answer 1

您在JavaScript甚至找不到之前就已經擁有了元素！ 因此，您根本不會獲得音頻。

試試這個：

<audio id="audio" hidden loop>
<source src="music.mp3" type="audio/mpeg">
No support for HTML5 audio!
</audio>

<div id="playButton" onclick="play()">PLAY</div>
<script type="text/javascript">
    var audio = document.getElementById("audio");

    // Binding event
    audio.oncanplay = function() {
        alert("Can start playing video");
    };

    // Playing the audio
    function play() {
        audio.play();
    }
</script>

Answer 2

補充Shreejibawa發表的內容，關於在DOM加載后需要執行的腳本，請查看有關HTML5音頻和javascript事件的文檔。

https://developer.mozilla.org/en-US/docs/Web/Events/canplay