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

StackOverflow https://stackoverflow.com/questions/2743279

Question

Is it possible to play a shoutcast/icecast stream using HTML5?

If so, how should I implement it?

Was it helpful?

Solution

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>

OTHER TIPS

There is a big problem with SHOUTcast, which I suspect is responsible for it not working even in Chrome which is supposed to support MP3.

SHOUTcast can serve three different types of response:

  • a native-SHOUTcast “ICY” protocol streaming audio response. It decides to do this if the player accessing the stream includes an icy-metadata: 1 header.

  • a plain-HTTP streaming audio response, without extra metadata, for media players with no ICY support.

  • the “SHOUTcast D.N.A.S. Status” page and other pages on the web interface.

How does it decide whether to serve a web page instead of an audio stream? It guesses whether you're using a web browser. By looking to see whether the User-Agent header starts with Mozilla/.... Because all web browsers are Mozilla, right? Jeez, SHOUTcast.

So when Chrome tries to fetch the audio stream to play, SHOUTcast thinks it's a web browser (well... it is) and refuses to give it the audio stream to put in the audio tag. Instead it gets the admin web page.

(I would guess Safari is passing the icy-metadata header to avoid the problem, having specific support for SHOUTcast. I can't test it at the moment as Safari won't play audio or video. Maybe it wants me to install QuickTime for that. Maybe it can go get stuffed.)

So you'll probably need to add a Flash audio player as fallback.

<audio src="http://85.25.108.20:8090/;" controls autoplay></audio>

This should work fine, but make sure /; is there after the stream URL and port. If you don't need autoplay, remove the "autoplay" tag.

Yes. But its only work in Safari

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

Cause Opera and Firefox did not support non free Codecs

On redirecting problems with <audio> tag in Browsers try to add "/stream" at the end of the stream URL for preventing redirecting.

example:

not working: http://live-radio01.xxxxxx.com/2TJW/mp3

working: http://live-radio01.xxxxxx.com/2TJW/mp3/stream

I use Icecast with Easystream for streaming to both mac and pc. A Script Sets up the audio player called MP3 Sticky Player. swf With the documentation support files the player just loads as below in both cases.

PC

<ul id="playlist" style="display:none;">
        <li data-path="http://99.250.117.109:8000/stream" data-thumbpath="thumbnail of whatever" data-downloadable="no" data-duration="00:00">
    </li>
</ul>

MAC

<audio style="width: 100%" controls="controls" autoplay="autoplay" src="http://99.250.117.109:8000/stream">
            Your browser does not support the <code>audio</code> element.
</audio>

As we have removed images from any mp3 metadata we use a image loader that grabs the Icy-MetaData (FYI you will need at least PHP 5.4 to run correctly) and matches a directory of cover art for each players song that streams.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top