As I am rebuilding the BlaatSchaap site, I want to keep it
up to modern standards. So, I am using HTML5 for it.
If you look at it’s DOCTYPE you will notice it is HTML5.
You might also know that I have run a radio station in the
past.
I think I have been experimenting with this in the past
and ran into issues too.
The problem, the HTML5 audio tag is very suitable for
playing audio files, but it fails for audio streams.
Chrome connects to the IceCast server correctly, and when
I tell it to display controls, it claims to be playing, but no audio
is produced.
Firefox 3.6 fails totally and will only display a ‘loading’ symbol
when the controls are enabled.
Firefox 4.0 beta8 nightly build will behave like Chrome, and
be playing ‘on screen’ without producing sound.
The only browser that appears to be successful playing the
IceCast2 stream is Opera. For this test I’ve used the
release version 10.63. Even though it plays, there are some
issues related to the fact that the javascript API for the audio
tag assumes it handles files, with a fixed size, rather then an
endless stream.
The first issue is, there is no stop() function. Only play() and
pause(). This results in, it will continue streaming when one
‘pauses’ the playback. This is to be expected when one
pauses the playback rather then stops it. One solution to
this issue is to write and delete the audio tag from Javascript.
HTML:
JavaScript:
function Play(){
document.getElementById(“player”).innerHTML=’playing‘;
}
function Stop(){
document.getElementById(“player”).innerHTML=”stopped”;
}
By deleting the audio tag this way, it will stop the connection to the server too. But there is still an issue. The stream is still buffered. When once starts the stream again, by rewriting the audio tag into the html document, it will start playing the buffer it had been playing before, and so, plays a few seconds of old content before it resumes the current live stream.
It seems the audio tag is not suitable to play radio streams. So far, the only reliable way to play radio streams, semi-platform independant, is using a Java based ogg player: Jorbis (http://www.jcraft.com/jorbis/) which I have been using on my site before. But still…. it depends on Java being installed.
« BlaatSchaap ‘live’ planned features ReBlogging, BlaatSchaap Style »
Hi there,
I'm experimenting with this as well, and I got a bit further with Icecast2 and Firefox 3.6. Have you tried making your mountpoint end in .ogg? E.g. /mymount.ogg, and setting the application type on the audio tag's source element to 'application/ogg' ?
The problem I'm stuck on now is that when my client changes tracks, the audio player 'stops', instead of staying tuned-in and allowing the next track to be played. Refreshing the page resumes playback, but that's hardly a solution. Overall, HTML5 audio seems tantalisingly close, but not yet there.
If you look at my pieced of code I've provided, you would have noticed
The mount point ends on .ogg and the type has been specified. I even went beyond just the type and specified the vorbis codec as well.
(As ogg is just a container format, could also contain speex or flac) But that doesn't seem to make much of a difference.
Track changes, well that brings up another topic. It doesn't seem I'm able to obtain meta data, like artist or song title from the audio element. A onmetadatachange would be a welcome event on the audio element for use with streaming radio.
btw. see also my 2nd post related to the audio tag:
http://andrevs.blogspot.com/2010/10/one-more-try-audio-tag-cross-domain.html