HTML5 audio starts from the wrong position in Firefox

Question

I am trying to play an mp3 file and I want to go to a specific location in the file. In Chrome 33 on Windows, the file jumps to the correct position (compared to VLC playing mp3 locally), but in Firefox 28 on Windows it plays too far ahead, and in Internet Explorer 11 it lags too far.

It worked correctly in Firefox 27 and earlier.

Is there a better way to do this?

---

EDIT: The problem does not even require SoundManager2. You can replicate the same problem only with the <audio> in Firefox. These two lines are all the code you need to reproduce:

 <audio autoplay id="audio" src="http://ivdemo.chaseits.co.uk/enron/20050204-4026(7550490)a.mp3" controls preload></audio> <button onclick="javascript:document.getElementById('audio').currentTime = 10;">Jump to 10 secs "...be with us in, er, 1 minute... ok" </button> 

Try it here: http://jsfiddle.net/cpickard/29Gt3/

EDIT: Tried with Firefox at Night, no improvement. I reported this as bug 994561 in bugzilla. Still looking for a workaround.

Answer 1

I am working on SoundJS and, while using audio sprites, are facing similar problems. According to the specification, setting the position of the html audio playhead may be inaccurate up to 300 ms. So this may explain some of the problems you see.

Interestingly, your violin plays correctly for me in FF 28 on winning 8.1, if I just let it play from the start.

There are also some known problems with the accuracy of the length of the sound, which may also have an effect, which you can read here .

If you need accuracy, I definitely recommend using web audio where possible, or a library like SoundJS.

Hope this helps.

Answer 2

The problem is VBR encoding mp3.

Download this mp3 to disk and convert it to a fixed bit rate, say with Audacity.

Run the example from disk:

 <audio autoplay id="audio" src="./converted.mp3" controls preload></audio> <button onclick="javascript:document.getElementById('audio').currentTime = 10;"> Jump to 10 secs "...be with us in, er, 1 minute... ok" </button> 

and it works great for me.

So my suggestion for a workaround is to add an alternative file with a fixed bit instead of the one you are using instead of <1>. Then it should work in the current FFx.

Answer 3

I just tried my code with a different sound url here , it worked, and I did not experience any kind of delay in Firefox (v29), which I did earlier.

 <audio autoplay id="audio" src="http://mediaelementjs.com/media/AirReview-Landmarks-02-ChasingCorporate.mp3" controls preload></audio> 

I assume that you need to jump over the audio file, your server should be configured correctly.

The client sends requests for a range of bytes to search and play specific areas of the file, so the server should respond adequately:

In order to support the search and playback of media areas that are not yet loaded, Gecko uses HTTP 1.1 byte requests to retrieve media from the target search position. In addition, if you do not serve X-Content-Duration headers, Gecko uses byte requests to search at the end of the medium (assuming you use the Content-Length header) to determine the duration of the medium.

Hope this helps. You can also try looking at the Web Audio API for sound effect playback, which gives you some guarantees regarding playback delay.

Answer 4

I met the same problem and solved it by converting my MP3 file to CBR format (constant bit). Then it can solve the inconsistent problem between currentTime and real sound .

Choose CBR format

---

Steps:

• Download and install "Audacity" (free for any platform).
• Open the MP3 file
• Press [File] → [Export] → [Options] → [Constant] (See: Converting MP3 to a constant data rate )
• Audacity will ask you to provide a LAME MP3 encoder (See: [Download and install LAME MP3 encoder])

There will be no inconsistent / asynchronous problem.

---

See also:

• HTML5 audio starts from the wrong position in Firefox
• Inconsistent search in HTML5 player

[e-mail]

Answer 5

After testing the script, it’s noteworthy that there is a problem with FF, anywho, after searching at some point, the problem is related to “performance lag”, but the good news is that someone found a solution to this problem, you may want to read the following :

http://lowlag.alienbill.com/

one script will solve all this.