Best way to embed audio in a webpage?
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]-->
![Chuck Le Butt](https://i.stack.imgur.com/vr1x4.jpg?s=256&g=1)
Comments
-
Chuck Le Butt about 2 years
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.
-
antyrat about 13 yearsbgsound is not part of audio tag. Just add it after <body> tag.
-
antyrat about 13 yearsAlso I don't understand why you add backslashes to the attributes values at <bgsound>
-
antyrat about 13 yearsBTW I not sure that bgsound supports mp3 files. You need to convert your file into wav instead.
-
Chuck Le Butt almost 13 yearsAs stated, the above works with IE7, IE8, IE9, FF3.5, FF4, Safari and Chrome. I've tested it myself.