CODEWITHSUNDEEP
javascripthtml5-audio
Hussain Khalil
Hussain Khalil

Reputation: 1650

`canplay` HTML5 Audio event not firing

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)

Upvotes: 4

Views: 8604

Answers (2)

locoMotion
locoMotion

Reputation: 372

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.org/en-US/docs/Web/Events/canplay

Upvotes: 1

Shreejibawa
Shreejibawa

Reputation: 1868

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>

Upvotes: 4

Related Questions