HTML5 Audio Not Working on Firefox

Audio tag doesn't work in Firefox and Opera

Using your code and testing it in firefox made it clear that the problem was the codecs. The following lines were copied from the firefox console log:

[10:20:19.068] Specified "type" attribute of "audio/ogg; codecs='vorbis'" is not supported. Load of media resource Example.ogg failed. @ http://example.com/

[10:20:19.068] Specified "type" attribute of "audio/mpeg; codecs='mp3'" is not supported. Load of media resource Example.mp3 failed. @ http://example.com/

Then, removing the codecs specification from the type attribute made it work in Firefox, Safari and Opera.

<audio class="tr_audio">
   <source src="ogg/track1.ogg" type="audio/ogg">
   <source src="track1.mp3" type="audio/mpeg">
</audio>

I hope it helped. Cheers

html5 audio mp3 not working in firefox

K3N correctly presents the issue in his comment "The audio file in question is not a MP3 file but a WAVE file container file which seem to be embedding MP3 encoded data".
I confirmed this by performing avconv -i <filename> on the .mp3 in question. I then re-encoded the file using avconv -i <filename> -ar 11025 <new-filename> and created a new test-link here which correctly plays back the .mp3 file in Firefox.

(Both of the avconv operations above can be performed using ffmpeg as well.)

I have tested this in firefox on OS X 10.11.4, Ubuntu 14.04 and Windows 10 in all instances Firefox plays back the new repackaged file.

NB. After further investigation, the sampling rate (11025 Hz) is a non-issue. My tests there masked the issue which K3N raised by properly repackaging the .mp3

Audio not playing properly on Firefox

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>

HTML5 audio tag bug in Firefox

First of all I would suggest to follow this link: http://www.position-absolute.com/articles/introduction-to-the-html5-audio-tag-javascript-manipulation/

It give an example on how to use audio tag in html and manipulate it in javascript. If you see Your browser does not support the audio tag. instead of an audio widget, thats because your firefox version doesn't support HTML5 audio tag.

Firefox won't play .WAV files using the HTML5 audio tag?

What's the bit depth on your WAV files? Firefox supports 8-bit and 16-bit PCM, but not other bit depths (12, 20, 24, 32).

---

Related Topics