I'm trying to determine when an HTML5 audio element is ready to start playing so I can inform the user. I'm using the following code:

<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>

However, the alert never appears, even after pressing the playButton. Im using the lates Chrome (Chrome 40)

I'm trying to determine when an HTML5 audio element is ready to start playing so I can inform the user. I'm using the following code:

<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>

However, the alert never appears, even after pressing the playButton. Im using the lates Chrome (Chrome 40)

• javascript
• html5-audio

• hope it will help you :) stackoverflow./questions/10790091/… – user4523269 Commented Feb 7, 2015 at 7:25

2 Answers 2

You are getting element before JavaScript even finds it! So you don't get audio at all.

Try this one:

<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>

Adding on to what Shreejibawa posted, about your script needing to be executed after the DOM is loaded, take a look at the docs for HTML5 audio and javascript events.

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