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

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.


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


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


您是否正在发送Accept-Ranges(RFC 2616,第14.5节)响应头?

链接地址: http://www.djcxy.com/p/60728.html

上一篇: 使用html5`<audio>`标签流式传输音频

下一篇: 通过带有HTML5 <audio>标签的流式MP3文件进行搜索