28

Is it possible to play shoutcast (or some) internet radio streams with html5?

So I have next code:

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

I save it as HTML page and start my browser (Google chrome 4.0.249.78, safary or FF)

But it does not play/work!(

And it does not play with any other internet radio I tried to play!(

Why!?! What am I doing wrong?

btw: from HTML5 (including next generation additions still in development) 2.6.1 Protocol concepts User agents can implement a variety of transfer protocols, but this specification mostly defines behavior in terms of HTTP. [HTTP]

The HTTP GET method is equivalent to the default retrieval action of the protocol. For example, RETR in FTP. Such actions are idempotent and safe, in HTTP terms.

The HTTP response codes are equivalent to statuses in other protocols that have the same basic meanings. For example, a "file not found" error is equivalent to a 404 code, a server error is equivalent to a 5xx code, and so on.

The HTTP headers are equivalent to fields in other protocols that have the same basic meaning. For example, the HTTP authentication headers are equivalent to the authentication aspects of the FTP protocol.

Jonas
  • 121,568
  • 97
  • 310
  • 388
Rella
  • 65,003
  • 109
  • 363
  • 636
  • here you can find some additional informations and links that you may use: –  Oct 27 '11 at 17:25
  • Somewhat related to this issue: http://stackoverflow.com/questions/17014317/playing-mp3-shoutcast-streams-with-html5-audio-in-firefox?answertab=votes#tab-top – spender Jul 12 '13 at 14:58

10 Answers10

45

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

<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>
jameshfisher
  • 34,029
  • 31
  • 121
  • 167
Nate Sweet
  • 984
  • 9
  • 3
  • This works for my site I made for my schools online radio station. They use shortcuts broadcasting mpeg stream. No javascript needed – Russell Asher Mar 03 '13 at 20:10
  • Actually, for me the semicolon raises a 404 (File Not Found). I just opened the icecast admin interface from where I was able to find and open the stream mountpoint and I copied the HTML element (it was video, but audio also works) to my frontend. Rock'n'roll :) – metakermit May 14 '15 at 18:15
  • 1
    appears the "extra semicolon" is part of the URL and sometimes adding ";stream/1" instead is also helpful (though sometimes you don't need semicolon at all perhaps?), ref: http://jplayer.org/latest/demo-08/ – rogerdpack Nov 04 '15 at 00:52
16

HTML5 doesn't specify what audio formats (whether progressive or streaming) the player must support. That's up for the browser to determine, based on demand and implementation feasibility. In earlier drafts, we tried to specify a few baseline codecs and formats that all browsers must support, but each of the possible formats caused some browser vendor to refuse to implement it.

The following appears to work in Safari (4.0.4, WebKit nightly 6531.21.10, r54538, Mac OS X 10.6.2), but not Chrome or Firefox:

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

(note that <audio> requires an end tag in the HTML serialization, it can't use an XML style self-closing tag, and I need to include controls or autoplay in order to actually start the audio)

This is likely due to the fact that Safari gets support for Shoutcast "for free" because it just uses QuickTime to handle any audio and video URLs it is given, and QuickTime already has support for Shoutcast. This can also lead to some strange bugs, as QuickTime's HTTP implementation is, well, quirky, to put it kindly.

I'd suggest filing bugs asking for Shoutcast support in browsers that don't support it. Here are the bug trackers for Firefox (Gecko/Mozilla), Chrome (Chromium), and Safari (if it happens not to work on Windows, or something like that).

Community
  • 1
  • 1
Brian Campbell
  • 322,767
  • 57
  • 360
  • 340
  • I assume it didn't specify anything about which streaming formats to support? Or would you say if it supports an audio codec, it "will" support streaming in that format typically? – rogerdpack Nov 04 '15 at 00:54
10

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

leemes
  • 44,967
  • 21
  • 135
  • 183
Yahoo
  • 124
  • 1
  • 2
4

well I've checked ogg_vorbis stations. I downloaded some playlist and opened it in notepad, and copy out the url of a stream. So if you want to test it just copy this to empty file and name it something.html.

<!DOCTYPE html>
    <html>
    <head>
    <title>audio testing live stream!</title>
    </head>
    <body>
    <audio controls="controls" autoplay="autoplay" src="http://oggvorbis.tb-stream.net:80/technobase.ogg">
    </audio>
    </body>
</html>

that's it!

BB

ninja
  • 41
  • 2
4
<!DOCTYPE html>
<audio controls src="http://baldyradio.com:8010/;"></audio>

This works in the release version of IE9, Sad that the same can not be said for FireFox 4!

TechMonkey
  • 41
  • 1
2

The above posts give the correct answer, allthough they don't mention the use of the slash. Make sure /; is there after the stream URL and port.

<audio src="http://shoutcast.internet-radio.org.uk:10272/;" />
Kurt Van den Branden
  • 11,995
  • 10
  • 76
  • 85
2
<audio controls src="http://example.com:8000/mountpath;"></audio>
000
  • 280
  • 1
  • 2
  • 11
2

reading the HTML 5 audio specification (http://www.w3schools.com/html5/html5_audio.asp) W3C outlines which formats (MP3 or OGG) are supported by which browsers

What i would do is have an icecast server (not ShoutCast) streaming a MP3 and an OGG stream

using javascript detect the browser type - http://www.javascripter.net/faq/browsern.htm

if (the browser does not support HTML5){ print a message - USE a New Browser }

if (the browser supports HTML5 and OGG streaming (use list from W3c)){ use the OGG stream from the icecast server in the SRC tag }

if (the browser supports HTML5 MP3 streaming (use list from W3C)){ use the MP3 stream from the icecast server in the SRC tag }

i think this would cover all the major browsers and would solve most peoples problems you will probably find in the future this will be redundant as more browsers support

Andrei
  • 29
  • 1
  • 2
    Supporting browser detection and W3C support matrices is a path to insanity. There is a programmatic way to detect stream support. Soundcloud uses it and they created this http://areweplayingyet.org you could inspect the code on github to see how they do it. – Bruno Bronosky Sep 09 '12 at 05:47
  • Please [DO NOT](http://w3fools.com) link to w3schools when talking about specs. That site has ZERO connection to the w3c (except that the w3c people probably hate them). It also contains lots of outdated, wrong or insecure information. – ThiefMaster Dec 31 '13 at 18:10
1

Well, Firefox and Opera do not support non-Free codecs such as mp3 (as with the Opera 10.5 alpha, FF 3.5 and later supports only PCM wav and Ogg Vorbis for audio). I believe Chrome and Safari do support MP3, however.

The next problem is that your URL appears to point to a webpage describing the stream, not to a stream.

Finally, as far as I know, no one has implemented a playlist parser for the audio element (the spec only mentions audio files, not playlists), which is a problem here, as even when you click "listen" you get a playlist rather than a raw stream.

Kelly Clowers
  • 111
  • 5
  • word "Web radio" exist here alot (in specification) http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#attr-media-src – Rella Feb 10 '10 at 02:16
1

Yes you can play ShoutCast2 I use it like this in this way

<audio preload="none" autoplay="autoplay" controls="controls">
    <source src="http://178.32.62.172:9079/stream" type="audio/mpeg">
    Your browser does not support this player, please update the version
</audio>
Hector Lara
  • 182
  • 1
  • 10