I've recently needed to publish a website with streaming audio and was surprised how difficult it was to find code which would work on all computers, tablets and smartphones in year 2012, and also the number of professionally-designed websites which fail in this regard. The answer appears to be in this W3C Schools article. The short version is: Use HTML5 <audio> backed by mp3 + ogg.
Here is a demo…
However, since the article is pretty old, I tested it on a number of current systems and found that it works in all of them, right out of the box, with no optional plugin installations. Here is what I tested…
• Android (on a smart phone) : The Internet app
• iOS 6 (on iPad) : Safari web browser
• iOS 6 (on iPad) : Atomic web browser
• Mac OS X 10.8 : Firefox 18.0
• Mac OS X 10.8 : Google Chrome 23.0
• Mac OS X 10.8 : Safari 6.02
• Mac OS X 10.8 : Opera 12.11
• Windows 7 : Internet Explorer 9.0
• Windows 7 : Firefox 17.0
• Windows 7 : Google Chrome 23.0
In the code (Show Page Source), please note that you must provide two audio files, .mp3 and .ogg. This is because, for some reason which a mere mortal electrical engineer cannot understand (probably involving patents or not invented here), Firefox (by my testing) and Opera (according to the aformentioned article) cannot play mp3 files. But, lo, they can play ogg files. Conversely, the other browsers seem able to play mp3, but not always ogg. There are other file formats which are supported by various browsers, but it seems that the combination of mp3 + ogg is the smallest combination which will work in all browsers.
Now, a couple observations on the code,
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
which are not explained in the aforementioned article.
It appears that this code works by starting with the first line in the <audio> element, trying to play the ogg file. If that doesn't work, it goes to the second line and tries to play the mp3 file. If that doesn't work, it goes to the third line and displays the Your browser does not support… message.
I'm also not sure why they put the ogg file before the mp3. Possibly it is because ogg files are generally smaller, and will therefore start playing faster and/or with less choppiness in limited-speed connections, and are therefore preferred over mp3.
UPDATE 2012-12-27
Although the above code seems to work fine in the field, the Sandvox website creator which I use to create this site warns me that it is Invalid HTML. Sandvox developer Dan Wood explains the reason for this and suggests this code…
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
which results in this example…
and indeed that clears the warning in Sandvox, passes W3C's validator, and still seems to work, at least in Firefox and Safari, but not Opera.
Here is an audio player created by dropping an .mp3 file into Sandvox' built-in Media Object