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

html streaming audio-streaming shoutcast icecast
Cy. picture Cy. · Apr 30, 2010 · Viewed 59.7k times · Source

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

If so, how should I implement it?

Answer

Nate Sweet picture Nate Sweet · Jul 6, 2010

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>

Related questions

Streaming via RTSP or RTP in HTML5

I'm building a web app that should play back an RTSP/RTP stream from a server http://lscube.org/projects/feng. Does the HTML5 video/audio tag support the rtsp or rtp? If not, what would the easiest solution be? …

Read More
Playing m3u8 Files with HTML Video Tag

I am trying to use HTTP Live Streaming (HLS) to stream video to my computers and my iPhone. After reading through the Apple 'HTTP Live Streaming Overview' as well as 'Best Practices for Creating and Deploying HTTP Live Streaming Media …

Read More
Best approach to real time http streaming to HTML5 video client

I'm really stuck trying to understand the best way to stream real time output of ffmpeg to a HTML5 client using node.js, as there are a number of variables at play and I don't have a lot of experience …

Read More