28

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">

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.

Aurélien Gasser
  • 3,043
  • 1
  • 20
  • 25
Kyle Slattery
  • 33,318
  • 9
  • 32
  • 36
  • I also want to do this, but all I have found is that this is supported only by ogg and m4a formats. So i'm not sure it is possible. But I am still looking. – Khalid Abuhakmeh Sep 16 '11 at 16:05

6 Answers6

8

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

the
  • 21,007
  • 11
  • 68
  • 101
Dustin Blake
  • 579
  • 5
  • 10
  • Thanks for pointing out jplayer - can't believe I hadn't heard of it before – acatalept Apr 16 '12 at 14:17
  • 1
    Excellent! Worked like a charm. Seek wasn't working on Chrome, but was working on Firefox and Safari. Added Accept-Ranges in header and seek started working. – K.K Feb 02 '15 at 02:05
  • Huh... do you guys mean that the player basically knows what byte range to request for the given second? – jayarjo Oct 23 '19 at 14:48
6

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

Дмитрий Александрович
  • 109
  • 1
  • 4
  • On my WCF application adding this last parameter on the response header: Content-Range:0-(file size)/(file size) along with the others that you have mentioned, worked! – Rafael Araújo Apr 05 '18 at 21:16
  • Thanks very much for this, it was such an unclear mystery until learning that the server has to be emitting these headers. Content-Range is apparently "optional" in the spec, but not if you are WebKit on mobile iOS x) – sova Nov 19 '20 at 21:12
3

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

Pieter
  • 2,188
  • 20
  • 27
1

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

Julian Reschke
  • 40,156
  • 8
  • 95
  • 98
  • 1
    Maybe I wasn't too clear in my original question: I just want to seek within the buffered part of the video, so byte range requests shouldn't be necessary at the moment. – Kyle Slattery May 13 '10 at 16:17
-1

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!

Artiom Chilaru
  • 11,811
  • 4
  • 41
  • 52
  • I am unable to feed a file directly to a client player due to local policies. When I restart the playback or seek to the start, no new request is being made, it plays from what is buffered. I cannot seek anywhere else. – Qwerty May 07 '15 at 08:55
-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 :)

daniel
  • 47
  • 2