Here is a page where we test various ways to embed .mp3 files into a web page. If you're interested in a different audio format, try one of the pages on the left.
Bare Link
First off, we can just put in a bare link. So here's the link to the famous Summertime Blues.
<object>
Tag Set
Then, we'll play Summertime Blues, but using an unadorned <object>
tag.
This plain object works, but it autoplaysunless you add
<param name="autoplay" value="false" />
(or value="0"
).
Also, it seems, that the alignment is rather borked unless we put some height and width to the object.
But it doesn't work in IE6. Not even when one adds a "src" parameter.
<embed>
Tag Set
Ok, now we'll try the <embed>
element.
So, <embed>
, pretty much unadorned save for the autostart="false"
requirement works in IE6, whereas <object>
does not. Also, html5 will support <embed>
, which is to say, it will become un-depricated.
New HTML5 <audio>
Tag Set
Ok, now we'll try the <audio>
element.
I had to add the attribute controls="controls"
to get it to show up in Opera. Still didn't play.
Works in Chrome, but it auto plays. WTF?
Now it's ok in Chrome. The proper attribute is autoplay="autoplay"
, that is, if you indeed wish it to autoplay. I had put in autoplay="false"
, which is proper for <object>
. But with autoplay="false"
missing from the <audio>
element, it just loads and works (in Chrome...not Opera). So don't put anything, and it won't autoplay. Yay!
Use someone else's flash player
Lots of folks on the web have written little flash audio players, complete with controls, that you can just paste into your web page and use as is. My example is the Google Reader player.
Once again, here's Summertime Blues:
I didn't get this to work from a locally hosted file (even with fully qualified url). WTF?
Summary
Here's the dope:
- Opera
<object>
Works fine<embed>
Usually works fine<audio>
Visible control, but does not work- IE6
<object>
Does not work<embed>
Does work<audio>
Does not work--no visible control- IE8
<object>
Flakey<embed>
Does work<audio>
Does not work- Chrome
<object>
Works fine<embed>
Works fine<audio>
Works fine- FireFox
<object>
Works fine<embed>
Works fine<audio>
Does not work--no visible control- Safari
<object>
Works fine<embed>
Works fine<audio>
Works fine
What's next?
Redo the exercise with some other formats, such as .wav and .ogg, whatever the hell that is. Do I want to hunt up some .aiff as well?