html5 audio livestreaming

Question

I'm creating my own audio, without controls of the browser.

<audio src="http://50.7.98.194:8081/~dl3/cgi-bin/dl.cgi/bqmu5mltxcqy43mxecgo4gnw743qr7fd7io22q5xj4/gl1mwvp6b326.mp3" id="audio">
</audio>

I have these functions, called when clicked some buttons:

function play()
{
   audio.play();
}

function play()
{
   audio.pause
}

function stop()
{
   audio.pause();
   audio.src = audio.src;
}

But for now, I only can reproduce mp3 or ogg files, but not a live stream radio. I read about some plugins, but I need do it with pure html5.

Could you help me, please? Thanks very much,

Answer 1

Playing audio from a "live source" seems to be supported by modern browsers. Basically just use the normal HTML 5 audio tags, and input the "live stream" URL as the source, ex:

<audio controls>
  <source src="http://audio-mp3.ibiblio.org:8000/wcpe.mp3" type="audio/mpeg">
  <source src="http://audio-ogg.ibiblio.org:8000/wcpe.ogg" type="audio/ogg">
</audio>

And the stream "just works" as it were, though attempting to seek with the default controls does nothing. So eventually you may want to replace the controls with "custom" ones, in normal HTML 5 media style. For backward compatibility to non HTML 5 browsers, this project may be useful: https://github.com/etianen/html5media/wiki/Embedding-audio (haven't tested it with live streaming but could/should work). Mp3 codec seems to be supported in major browsers (barring possibly firefox on Linux [?]). Opus might be another nicely cross platform option, I'm not sure codec wise what is the "best" choice as it were.

With some streams (shoutcast I presume) I have had to add a closing ';' to the URL, see https://stackoverflow.com/a/3182814/32453 for notes there, but that's basically just to get the "right" url.

Answer 2

Unfortunately, there is still no single video and audio codec, which is supported by all browsers! The programmers have to ensure that there is fallback provided for use-cases where browser A doesn't support codec B and vice versa.

You can take a look at this compatibility table, for both desktop and mobile browsers.

Desktop:

• Internet Explorer (9.0+) support MP3 and AAC codecs
• Chrome (6.0+) support Ogg Vorbis, MP3, WAV+
• Firefox (3.6+) support Ogg Vorbis, WAV
• Safari (5.0+) support MP3, AAC, WAV
• Opera (10.0+) support Ogg Vorbis, WAV

Mobile:

• Opera Mobile (11.0+) supported codecs are device-dependent
• Android (2.3+) supported codecs are device-dependent
• Mobile Safari (iDevices with iOS 3.0+) support MP3, AAC
• Blackberry (6.0+) support MP3, AAC

Since flash is still widespread enough, it's probably the safest fallback.

Also, I want to note that there's nothing worse to use some library, some of them (e.g. jPlayer) provides very powerful interface and this only can help you to produce better code!

I think you can find everything you want to know in the following article: HTML5 Audio Radio Player by Opera Devs