CODEWITHSUNDEEP
javascripthtml
Colin Pickard
Colin Pickard

Reputation: 46643

HTML5 audio starts from the wrong position in Firefox

I'm trying to play an mp3 file and I want to jump to specific location in the file. In Chrome 33 on Windows, the file jumps the correct position (as compared with VLC playing the mp3 locally) but in Firefox 28 on Windows it plays too far forward and in Internet Explorer 11 it plays too far behind.

It used to work correctly in Firefox 27 and earlier.

Is there a better way of doing this?

EDIT: The problem doesn't even require SoundManager2. You can replicate the same issue with just the <audio> tag in Firefox. These two lines are all the code you need to reproduce it:

<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 Nightly, no improvement. I have reported it as bug 994561 in bugzilla. Still looking for a workaround for now.

Upvotes: 12

Views: 3051

Answers (5)

蔡宗容
蔡宗容

Reputation: 1047

I met the same issue, and I solved it by converting my MP3 file to the CBR(Constant Bit Rate) format. Then, it can solve the inconsistent issue between the currentTime and the real sound.

Choose the CBR format

Steps:

  • Download and install "Audacity" (it's a free for any platform)
  • Open your MP3 file
  • Click [File] -> [Export] -> [Options] -> [Constant] (See: Converting MP3 to Constant Bit Rate)
  • Audacity will ask you to provide the LAME MP3 encoder (See: [download and install the LAME MP3 encoder])

There will be no inconsistent/asynchronous issue.

Also see:

[email protected]

Upvotes: 4

GavinBrelstaff
GavinBrelstaff

Reputation: 3069

The problem lies in the VBR encoding of the mp3.

Download that mp3 to disk and convert it to 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 fine for me.

So my suggestion for workaround is is to upload an alternative fixed-bit mp3 file in place of the one you are using. Then it should work in the current FFx.

Upvotes: 6

OJay
OJay

Reputation: 1239

I work on SoundJS and while implementing audio sprites recently ran into similar issues. According to the spec, setting the position of html audio playhead can be inaccurate by up to 300ms. So that could explain some of the issues you are seeing.

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

There are also some known issues with audio length accuracy that may also have an effect, which you can read about here.

If you want precision, I would definitely recommend using Web Audio where possible or a library like SoundJS.

Hope that helps.

Upvotes: 4

Aditya
Aditya

Reputation: 4463

I just tried your code with another audio url here, it seemed to work and i did not experience a delay of any sort in Firefox( v29) which i did previously.

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

I guess to jump around an audio file, your server must be configured properly.

The client sends byte range requests to seek and play certain regions of a file, so the server must response adequately:

In order to support seeking and playing back regions of the media that aren't yet downloaded, Gecko uses HTTP 1.1 byte-range requests to retrieve the media from the seek target position. In addition, if you don't serve X-Content-Duration headers, Gecko uses byte-range requests to seek to the end of the media (assuming you serve the Content-Length header) in order to determine the duration of the media.

Hope this helps.. You could also try looking into Web Audio API for sound-effect-like playback which gives you some guarantees about the playback delays.

Upvotes: 2

ProllyGeek
ProllyGeek

Reputation: 15836

After testing the fiddle it is noticable that there is some issue with FF , anywho , after searching sometime , the issue is due to "Performance lag" , but the good news is that someone has found a solution to that issue , you may want to read this :

http://lowlag.alienbill.com/

a single script will solve it all.

Upvotes: 0

Related Questions