Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 578
Kyle Slattery Avatar asked May 09 '10 19:05

Kyle Slattery


People also ask

Which tag of HTML5 is used for playing an MP3 file?

The HTML <audio> element is used to play an audio file on a web page.

Does HTML5 support MP3?

The most supported codecs for playing audio in HTML5 are Ogg Vorbis, MP3, and Wav. There is currently no single codec that plays across all browsers. To get around the potential for codec incompatibility, HTML5 allows you to specify multiple source files.

How do you link an MP3 file in HTML?

You can also use the <embed> tag or the newer <audio> tag to insert a sound file directly into a web page. With audio files, we recommend using the . MP3 file format because of its wide acceptance on the Internet, and is utilized by all browsers and operating systems.

Does HTML5 support audio tag?

HTML5 <audio> Tag. Since the release of HTML5, audios can be added to webpages using the “audio” tag.


2 Answers

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

like image 136
Dustin Blake Avatar answered Sep 20 '22 19:09

Dustin Blake


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

like image 20