How to Play Shoutcast Internet Radio Streams with HTML5

Is it possible to play shoutcast internet radio streams with html5?

You can't do it with ShoutCast but with Icecast and edcast client you can stream live vorbis trough HTML5 <audio> tag. Just point it to http://your-url.com:port/stream.ogg :p

How could I play a shoutcast/icecast stream using HTML5?

2020 update

Modern browsers don't need any special treatment or server-side workarounds to play audio. Simply use an audio tag with a direct link to one or more stream sources (not a playlist):

<audio>
<source src="http://relay.publicdomainradio.org/classical.mp3" type="audio/mpeg">
</audio>

From MDN:

The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.

Browsers support flac, mp3, vorbis, aac, opus and wav. More details on caniuse.com.

Original post

Add a semicolon to the end of the http request. It IS the protocol set forth by shoutcast to override it's browser detection. Like this:

<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>

Playing mp3 Shoutcast streams with HTML5 audio in Firefox?

Adobe Flash Player support for Shoutcast has broken twice (see here and here) in the last year, so this is a really important issue for me.

I decided to investigate.

Instead of using standard HTTP, Shoutcast uses ICY protocol, which is approximately the same as HTTP/1.0.

The status line that Shoutcast sends is

ICY 200 OK

but Mozilla doesn't understand the ICY part of this status line, so it assumes that the response is HTTP/0.9 (which has no content type/headers). The upshot of this is that the body of the stream includes the ICY status line and headers (i.e the headers are not parsed by Mozilla). Because there's no content-type, Mozilla does a bit of "media-sniffing" and discovers valid MP3 frames at a small offset into the content and the <audio> tag functions correctly using this sniffed content-type.

Now along comes an issue that gets fixed by forcing all HTTP/0.9 content coming over non-standard ports (i.e. non-port 80/443) to a content-type of text/plain. Now, when the content body is passed to the HTML <audio> tag it already has a content-type of text/plain, so it is no longer sniffed as it was prior to this issue, and instead Mozilla doesn't allow it to be played.

The good news is that I fixed this annoyance and Mozilla now treats ICY protocol as being equivalent to HTTP/1.0. This in turn means that Mozilla can decode the headers and read the correct content type audio/mpeg and playback is restored.

My fix should find its way into Mozilla24 later this year.

In the mean time, if you want to play Shoutcast in Mozilla, you'll need to broadcast over port 80.

Shoutcast Streaming & HTML5 Audio Player

This problem has nothing to do with your code. There are two problems.

The first is browser codec support. Check out the MDN page for updated info on codec support per browser.

The second problem is that SHOUTcast returns an oddball status line. It will send ICY 200 OK instead of HTTP/1.0 200 OK. Some browsers will not accept this header. The only way around it is to use something else for your streaming server, such as Icecast. (If you're interested, I also run a streaming service that can relay your existing SHOUTcast stream in a standards-compliant HTTP stream that has better compatibility. E-mail preview@audiopump.co if you are interested.)

SHOUTcast Streaming Radio Stations

The problem is not the issue with the User-Agent sniffing, but the fact that SHOUTcast servers do not send standard HTTP responses.

A normal HTTP response starts off with a status line that looks like this:

HTTP/1.0 200 OK

SHOUTcast servers send this instead:

ICY 200 OK

This works for many HTTP clients, but more and more HTTP clients break on a response like this.

The solution is to stop using SHOUTcast. Icecast is a good alternative. I have written my own called AudioPump Server to help with compatibility in browsers as well as Android clients.

If the stations you want to play aren't yours, you would have to proxy that playback through your own server to fix the status line problem.

Is it possible to listen to any kind of internet radio with HTML5 directly?

Yes, it is.

Take a look at the former specification of html5:
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#attr-media-src

There is a huge load of specialities about streaming in html5.

And furthermore, take a look at this:
http://web.psung.name/zeya/ - a whole html5 media server.


EDIT

Actually it's like impossible to stream live media.
It's not that it'll stay impossible, but actually it isn't implemented at all - well none of the today's HTML5 browsers are going to support this in the next month's, because the real "live-stream", as known from flash (or equal) hasn't really been specified by the w3-committee - yet.


2. EDIT

As previous experiments showed, it may be possible to use streams without explicitly implement something specific for them. The "non"-stream way works on both streams and static files.

Is it possible to play AAC provided by SHOUTcast with HTML5?

There might be some third party audio player for aac but I will share some links on my vast search I did

1 - HE AAC support

As per this post and also wiki pedia HEAAC

It says chrome supports HE-AAC

and here is a stack overflow post that will I guess help you to move formward.

SO AAC support

And here is another link saying chrome supports
**The MP4 container format with the H.264 video codec and either the AAC audio codec or the MP3 audio codec is natively supported by Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. Firefox will soon support the format, but only when a third-party decoder is available.

The MPEG media formats are covered by patents, which are not freely licensed. All the necessary licenses can be bought from MPEG LA. Since H.264 is currently not a royalty free format, it is unfit for the open web platform, according to Mozilla [1, 2], Google [1, 2] and Opera. However, since royalty free formats are not supported by Internet Explorer and Safari, Mozilla has decided to support the format anwyay, and Google never fulfilled their promise to remove support for it in Chrome.**

LINK : AAC Support

Please let me know if any of the link is help ful

Sky.fm live stream with HTML5 audio

check the contents of the m3u file.
use this as src:
http://u10.sky.fm:80/sky_altrock



Related Topics



Leave a reply



Submit