11

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.

Colin Pickard
  • 45,724
  • 13
  • 98
  • 148
  • 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: http://jsfiddle.net/cpickard/TBS8C/ – Colin Pickard Apr 09 '14 at 14:27
  • Works perfect on : chrome 33 , FF 28 , maybe you just need to clear your cache ! – ProllyGeek Apr 09 '14 at 14:28
  • no no no wait a moment there is an issue with FF – ProllyGeek Apr 09 '14 at 14:32
  • @ProllyGeek I tried clearing the cache; no improvement – Colin Pickard Apr 09 '14 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](https://github.com/scottschiller/SoundManager2/releases)? – megawac Apr 09 '14 at 15:23
  • @megawac I have updated to the latest v2.97a.20131201 but it doesn't appear to make any difference. jsFiddle with update here: http://jsfiddle.net/cpickard/TBS8C/13/ – Colin Pickard Apr 09 '14 at 15:48
  • Hey Colin, were you ever able to get this figured out? I'm running smack into the same issue and it's driving me batty. Thanks for sharing whatever you learned from this. – Brian FitzGerald Jun 13 '16 at 14:43

5 Answers5

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.

GavinBrelstaff
  • 3,016
  • 2
  • 21
  • 39
4

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.

OJay
  • 1,249
  • 7
  • 14
  • I think "switch to Web Audio" is probably the right workaround for me now. However I had a serious problem with SoundJS in Firefox, I get a second instance of the sound playing. I've asked another question about that: http://stackoverflow.com/questions/23081203/how-to-set-position-correctly-in-soundjs-for-firefox-ie – Colin Pickard Apr 15 '14 at 10:38
  • There was previously a bug in firefox web audio that has been fixed in the [latest version of soundjs](https://github.com/CreateJS/SoundJS). – OJay Apr 15 '14 at 15:28
  • OK I'm going to award the bounty to this answer since using Web Audio works correctly in Firefox, and the easiest way of tackling my problem is to switch to using SoundJS. – Colin Pickard Apr 17 '14 at 11:15
4

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:

tsungjung411@gmail.com

蔡宗容
  • 927
  • 12
  • 9
2

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.

Aditya
  • 4,453
  • 3
  • 28
  • 39
  • 1
    My Apache 2.2.22 server is responding with `206 Partial Content`; I assume that means it is configured correctly for this purpose, as per this answer: http://stackoverflow.com/a/720494 – Colin Pickard Apr 15 '14 at 11:52
  • You can make a range request to the mp3 using a GET request including a `range header` on command line: `GET http://ivdemo.chaseits.co.uk/enron/20050204-4026(7550490)a.mp3 HTTP/1.1 Host: your_remote_host Range: bytes=0-1024` . If it is responding with `206 Partial Content` that's not a server issue. – Aditya Apr 16 '14 at 06:53
  • Possibly the alternative file is a CBR file as per @GavinBrelstaff's answer? – Colin Pickard Apr 17 '14 at 11:19
0

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.

ProllyGeek
  • 15,517
  • 9
  • 53
  • 72
  • 2
    Sadly, this doesn't solve the problem. All this script does is simply chooses HTML5 ` – Colin Pickard Apr 09 '14 at 17:58