Onmouseover sound in Firefox

Question

Hi,

I'm using the following script for onmouseover sound effects on menu buttons on a site.

<script LANGUAGE="JavaScript"><!--


var aySound = new Array();

aySound[0] = "s.mp3";

document.write('<BGSOUND ID="auIEContainer">')
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;

function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//-->
</script>

This works fine in IE but not Firefox.

Does anybody know if there is way to have the same onmouseover sound effect in both IE and Firefox without using flash?

Thanks

Answer 1

The only way for sound on your website is to use either flash or whatever Facebook uses for incoming IM, but that too requires Apple Quicktime to play.

Answer 2

Does anybody know if there is way to have the same onmouseover sound effect in both IE and Firefox without using Flash?

Well, you could use a JavaScript library which normalizes cross-browser onmouseover behaviors. Or, if you really don’t want to — it should be possible in plain ol’ JavaScript, with a lot of hacks to support all different browsers. Your choice.

As posted in gist 243946, here’s a jQuery snippet to do exactly what you want:

var $sound = $('<div id="sound" />').appendTo('body');
$('#special-links-that-play-annoying-sounds-when-hovered a').hover(function() {
 $sound.html('<embed src="foo.mp3" hidden="true" autostart="true" loop="false">');
}, function() {
 // We could empty the innerHTML of $sound here, but that would only slow things down.
});

Of course, this could be written in plain old JavaScript (without jQuery) as well.