Best way to embed audio in a webpage?

Question

I know, I know. It sounds horrific, but it's what the client wants, and they're very set on the idea. It's now come to me to figure out the best way make it happen. Flash would be ideal but the client wants to avoid using it.

It's a digital audio file, so I can convert it to any format that might make things easier (e.g. MP3 or OGG) but it needs to support IE 8+, FF 3.5+, Safari and Chrome at the very least. It needs to autoplay, have hidden controls (I know, I know) and hopefully it will loop.

I would lean towards HTML5 audio, but I'm not sure if IE8 will support it (although I suppose for IE8 I could use Conditional Comments?).

Any ideas on the best way?

PS - I know, I know.

Answer 1

Here's the solution I ended up with. It works with IE7, IE8, IE9, FF3.5, FF4, Safari and Chrome.

<audio id="background_audio" autoplay="autoplay">
  <source src="static/audio/clip.ogg" type="audio/ogg" />
  <source src="static/audio/clip.mp3" type="audio/mpeg" />
</audio> 

<!--[if (!IE)|(gte IE 9)]>
<a href="#" onclick="document.getElementById('background_audio').muted = true; return false">mute sound</a>
<![endif]-->

<!--[if lt IE 9]>
<bgsound id="background_snd" src="static/audio/clip.mp3" autostart="true" loop="1">
<a href="#" onclick="document.all['background_snd'].src=''; return false">mute sound</a>
<![endif]-->