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 now, I'm streaming the code from node using chunked encoding, and if you go directly to the URL, it works great.

What I'd like to do is embed this using the HTML5 <audio> tag, like so:

 <audio src="http://server/stream?file=123"&gt;

where /stream is the endpoint for the node server to stream the MP3. The HTML5 player loads fine in Safari and Chrome, but it doesn't allow me to seek, and Safari even says it's a "Live Broadcast". In the headers of /stream, I include the file size and file type, and the response gets ended properly.

Any thoughts on how I could get around this? I certainly could just send the whole file at once, but then the player would wait until the whole thing is downloaded--I'd rather stream it.

Answer 1

Hi, 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 2

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

Answer 3

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 4

Hi,

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 :)