Seeking through a streamed MP3 file with HTML5 <audio> tag

Question

Hopefully someone can help me out with this.

I\'m playing around with a node.js server that streams audio to a client, and I want to create an HTML5 player. Right no

Answer 1

perhaps this html5 audio player example will explain and demonstrate us the new element and its .load, .play, .currentTime, etc. methods.

i use an array of elements and can set the currentTime position of course. we can use also eventhandlers (e.g. 'loadeddata') to wait before allow to seek.

ping and have fun with html5 :)

Answer 2

From what I understand you want the player to allow the user to jump to parts of the audio/video that haven't buffered yet, something like what Vimeo / YouTube players do.. Tbh I'm not sure if this is possible, as I've looked at some of the examples of html5 medial elements and they just didn't allow me to seek to unbuffered parts :(

If you want to seek through the buffered part - then it's not a problem. In fact - you're creating a problem for yourself here, as far as I understand. You want to stream the file, and what this does is makes the player think you have some kind of live stream out there. If you just sent the file directly - you wouldn't have this issue, because the player will be able to start playing before it loaded the whole file. This works fine with both audio and video elements, and I've confirmed this behaviour in both Chrome and FF :)

Hope this helps!

Answer 3

Make sure the server accepts Range requests, you can check to see if Accept-Ranges is in the header. In jPlayer this is a common issue in Webkit (particularly Chrome) browsers when it comes to progress and seeking functionality.

You might not be using jPlayer, but the Server Response information on the official website may be of some use.

http://www.jplayer.org/latest/developer-guide/#jPlayer-server-response

Answer 4

but I had the same problem. Its necessary to set some headers for media file response.

as example:

Accept-Ranges:bytes
Content-Length:7437847
Content-Range:bytes 0-7437846/7437847

Then audio tag will be able to seeking

Answer 5

have a look here http://www.scottandrew.com/pub/html5audioplayer/, I used this and it plays while it is downloading the file. It waits a little bit for the buffer but then plays. Never tried seeking though but I would start by trying to set the "aud.currentTime" in his code if that can be done.

Good luck

Answer 6

Are you sending an Accept-Ranges (RFC 2616, Section 14.5) response header?