Audio not playing properly on Firefox

Question

The following code plays the audio correctly on Chrome 88, but on Firefox 85 the audio cuts off and sometimes doesn't even play.

window.onload = function() {
    Audio.prototype.stop = function() {
        audio.pause();
        audio.currentTime = 0;
    }

    let audio = new Audio("./audio.mp3");
    let count = 0;

    function replay() {
        audio.stop();
        audio.play();
    }

    let button = document.getElementsByTagName("button")[0];
    button.addEventListener("click", function() {
        let interval = setInterval(function() {
            if (count < 10) {
                replay();
                count += 1;
            } else {
                clearInterval(interval);
                count = 0;
            }
        }, 100);
    });
}

How can I fix this so that audio is played correctly in Firefox? All the files needed to reproduce the problem can be found here.

score 3 · Accepted Answer · answered Feb 05 '21 at 05:45

It's because the HTMLMediaElement API is asynchronous by nature and that you can't expect it to be able to sustain navigating every 100ms like that.
Even the setting of currentTime is actually async, so with your very short interval you may be requiring the audio to stop even before it had time to start again.

For what you want to do, use the Web Audio API and its AudioBuffer interface, along with AudioBufferSourceNodes which is a really lite representation of a player, that you can control with extreme precision with very low latency:

(async () => {
  const context = new (window.AudioContext || window.webkitAudioContext)();
  const buffer = await fetch( "https://cdn.jsdelivr.net/gh/joaobzrr/firefox-audio-problem/audio.mp3" )
    .then( (resp) => resp.ok && resp.arrayBuffer() );
  const audiobuffer = await context.decodeAudioData( buffer );

  document.getElementById( "btn" ).onclick = async (evt) => {
    for ( let i = 0; i < 10; i++ ) {
      const buffersource = context.createBufferSource();
      buffersource.buffer = audiobuffer;
      buffersource.connect( context.destination );
      const starttime = context.currentTime + (i * 0.1);
      buffersource.start( starttime, 0, 0.1 );
    }
  };
})().catch( console.error );

<script src="https://cdn.jsdelivr.net/gh/mohayonao/promise-decode-audio-data@eb4b1322113b08614634559bc12e6a8163b9cf0c/build/promise-decode-audio-data.min.js"></script>
<button id="btn">click to start</button>

So I can be sure that I would only be playing the audio after it has loaded. — bzrr, Feb 05 '21 at 23:49
What are you talking about? Can't you read my example code? Does it look like I'm not waiting for it to be loaded? — Kaiido, Feb 05 '21 at 23:50

score 0 · Answer 2 · answered Feb 02 '21 at 23:16

I don't have any exprience using HTMLAudioElements, but the bug doesn't seem to be inside your code.
(Which makes sense, since it does work on Chrome)

Mozilla MDN's documentation about this also doesn't show that there is anything Firefox-related that might be unsupported.
(Except for supporting more than one audio type, which I don't think is the case here)

Wierd.

Did you try looking at these questions for answers that might help/guide you to find the answer ?
HTML5 audio not working on Firefox
HTML5-Audio-tag not playing in Firefox

Good luck finding the correct fix, comment me when you're done !

Audio not playing properly on Firefox

2 Answers2