Use other source of sound effect when using firefox beside mp3 - html

Question

I'm trying to make a menu with sound after user clicks it. It works well in Chrome, safari, and even IE, but not Mozilla Firefox. I use mp3 file for the sound which can't run on firefox. Here's the code
function loadSound (src) {
var sound = document.createElement("audio");
if ("src" in sound) {
sound.autoPlay = false;
}
else {
sound = document.createElement("bgsound");
sound.volume = -10000;
sound.play = function () {
this.src = src;
this.volume = 0;
}
}
sound.src = src;
document.body.appendChild(sound);
return sound;
}
$(document).ready(function () {
var sound = loadSound("<?=base_url()?>sound/testing.mp3"); // preload
$(".main_nav a").click(function(){
var ids = $(this).attr("id").split("-");
var url = ids[2];
sound.play();
setTimeout (function(){window.location = url;}, 2000);
return false;
});
});
What type of audio file works in firefox? How do I change the source file when a user use firefox?

Answer 1

Ok, I understand your problem and I have a solution.
You could use this function that I make:
function getSupportedAudio(){
var testEl = document.createElement( "audio" ), mp3, ogg;
if ( testEl.canPlayType ) {
mp3 = "" !== testEl.canPlayType( 'audio/mpeg;' );
ogg = "" !== testEl.canPlayType( 'audio/ogg' );
}
if(mp3){
return ".mp3";
}
else{
return ".ogg";
}
}
In your function loadSound(src) use this:
sound.src = src+getSupportedAudio();
document.body.appendChild(sound);
And when you call the loadSound function, don't send the audio format in the parameter (but you need to have both files, ogg and mp3, in the same folder and with the same name):
var sound = loadSound("<?=base_url()?>sound/testing"); // preload