最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - HTML5 audio starts from the wrong position in Firefox - Stack Overflow

programmeradmin4浏览0评论

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="(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: /

EDIT: Tried with Firefox Nightly, no improvement. I have reported it as bug 994561 in bugzilla. Still looking for a workaround for now.

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.

Share Improve this question edited Apr 10, 2014 at 8:39 Colin Pickard asked Apr 7, 2014 at 11:30 Colin PickardColin Pickard 46.7k13 gold badges104 silver badges151 bronze badges 7
  • 2 @ProllyGeek in what browser, what version, what OS? Anyway, it doesn't work in Firefox 28 on Windows 8 or IE11 on Windows 8, which are specific platforms I'm targetting. I have included a jsFiddle which demonstrates the problem: jsfiddle.net/cpickard/TBS8C – Colin Pickard Commented Apr 9, 2014 at 14:27
  • Works perfect on : chrome 33 , FF 28 , maybe you just need to clear your cache ! – ProllyGeek Commented Apr 9, 2014 at 14:28
  • no no no wait a moment there is an issue with FF – ProllyGeek Commented Apr 9, 2014 at 14:32
  • @ProllyGeek I tried clearing the cache; no improvement – Colin Pickard Commented Apr 9, 2014 at 14:42
  • @ColinPickard I can't look into this until the weekend but you're using a pretty old version of SM2 - theres been some focus on improved html5 support over the past year. Might want to try updating to latest? – megawac Commented Apr 9, 2014 at 15:23
 |  Show 2 more comments

5 Answers 5

Reset to default 6

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.

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.

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:

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

[email protected]

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.

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.

发布评论

评论列表(0)

  1. 暂无评论