CODEWITHSUNDEEP
javascriptfirefoxhtml5-audioreadystate
ea7ababe
ea7ababe

Reputation: 433

HTML <audio> element does not get into readyState 4 in Firefox

I have separate <audio> and <video> elements on my web page and I want them to start playing at the same time when both of them can be played without interruption (i.e. have their readyState set to 4). Now I am using the following code:

// this.audio is <audio>
// this.video is <video>

var ap = new Promise((resolve, reject) => {
    this.audio.addEventListener("canplaythrough", (e) => {
        e.target.removeEventListener(e.type, arguments.callee)
        resolve()
    })
    this.audio.load()
})

var vp = new Promise((resolve, reject) => {
    this.video.addEventListener("canplaythrough", (e) => {
        e.target.removeEventListener(e.type, arguments.callee)
        resolve()
    })
    this.video.load()
})

Promise.all([ap, vp]).then(() => {
    this.audio.play()
    this.video.play()
})

This works perfectly in Chromium and Opera browsers, but almost always fails in Firefox. The reason for this is that <audio> gets stuck in readyState == 3 no matter how long I wait. And hence it never fires canplaythrough event (which requires readyState == 4).

Though the <video> element gets in readyState == 4 almost instantly. Is it a Firefox bug or am I doing something wrong?

My version of Firefox is 51.0a2.

Upvotes: 4

Views: 832

Answers (1)

Tobias
Tobias

Reputation: 31

I encountered this issue when using a video element with different sources.

For example, when using a <track> element Firefox will only set readyState to anything above 4 if the <track> element can be successfully loaded. In my case the track was just a dummy with an empty src. Therefore Firefox deemed that the video is not ready and readyState was stuck on 2.

<video autoplay controls>
      <source src="resource.mp4" type="video/mp4">
      <source src="resource.webm" type="video/webm">
      <track id="vidTrack" kind="subtitles" src="" default>
</video>

As soon as I removed the track from the video element, Firefox started playing the video immediately.

Upvotes: 1

Related Questions