How Could I Play a Shoutcast/Icecast Stream Using HTML5

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>

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

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.

Ionic 3: playing an Icecast/Shoutcast audio stream

However, at the slightest connection drop the audio will stop and won't reconnect.

You can reconnect with your own code by handling the error event on the Audio element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/onerror

Not to mention that if I press pause, the stream will continue using data in the background.

Yes, you'll want to make your own UI to control this element. When someone pauses, you'll want to call .stop() instead. By default, the audio element is assuming a regular audio file that ends at some point.

A third-party plugin...

No plugin needed.

...a better buffering management and playing experience?

With the two suggestions I've made in this answer, you can have a useful experience for your users. However, there are two other issues you haven't touched on yet which you may run into.

The first is that regular ICY metadata isn't requested, nor decoded by the browser.

The second issue is that since the browser is treating your stream like a regular audio file, it's also buffering all of that audio data into memory. This isn't very useful for a live stream where you will never go back and play previously played audio. (This is rarely an issue you run into, since audio data requires relatively small amount of memory, but the problem does exist.)

Both of these are solved by using MediaSource Extensions. With MSE, you have direct control over retrieving the data, demuxing the metadata, and pushing data to a buffer to be played back. Since your code is in control, you can stream indefinitely without the memory leak.

How can I recognize an Icecast stream from an Shoutcast?

SHOUTcast servers start their response with ICY. Icecast servers start with HTTP/1.0. There are servers that clone both of these methods. You can use a packet sniffer like Wireshark to see this for yourself.

---

Related Topics