Cross-platform, cross-browser way to play sound from Javascript?

I am writing a dhtml application that creates an interactive simulation of a system. The data for the simulation is generated from another tool, and there is already a very large amount of legacy data.

Some steps in the simulation require that we play "voice-over" clips of audio. I've been unable to find an easy way to accomplish this across multiple browsers.

Soundmanager2 comes pretty close to what I need, but it will only play mp3 files, and the legacy data may contain some .wav files as well.

Does anyone have any other libraries that might help?

You will have to include a plug-in like Real Audio or QuickTime to handle the .wav file, but this should work...

//======================================================================
var soundEmbed = null;
//======================================================================
function soundPlay(which)
	{
	if (!soundEmbed)
		{
		soundEmbed = document.createElement("embed");
		soundEmbed.setAttribute("src", "/snd/"+which+".wav");
		soundEmbed.setAttribute("hidden", true);
		soundEmbed.setAttribute("autostart", true);
		}
	else
		{
		document.body.removeChild(soundEmbed);
		soundEmbed.removed = true;
		soundEmbed = null;
		soundEmbed = document.createElement("embed");
		soundEmbed.setAttribute("src", "/snd/"+which+".wav");
		soundEmbed.setAttribute("hidden", true);
		soundEmbed.setAttribute("autostart", true);
		}
	soundEmbed.removed = false;
	document.body.appendChild(soundEmbed);
	}
//======================================================================

If you're using Prototype, the Scriptaculous library has a sound API. jQuery appears to have a plugin, too.

dacracots code is clean basic dom, but perhaps written without a second thought? Of course you check the existance of an earlier embed first, and save the duplicate embed creation lines.

var soundEmbed = null;
//=====================================================================

function soundPlay(which)
{
    if (soundEmbed)
       document.body.removeChild(soundEmbed);
    soundEmbed = document.createElement("embed");
    soundEmbed.setAttribute("src", "/snd/"+which+".wav");
    soundEmbed.setAttribute("hidden", true);
    soundEmbed.setAttribute("autostart", true);
    document.body.appendChild(soundEmbed);
}

Came across the thoughts here while scanning for a solution for somewhat similar situation. Unfortunately my browser Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.15) Gecko/2009102814 Ubuntu/8.04 (hardy) Firefox/3.0.15 dies when trying this.

After installing latest updates, firefox still crashes, opera keeps alive.

I believe that the simplest and most convenient way would be to play the sound using a small Flash clip. I appreciate it's not a JavaScript solution but it IS the easiest way to achieve your goal

Some extra links from the previous similar question:

• Scriptaculous, a Javascript library: <http://github.com/madrobby/scriptaculous/wikis/sound>
• an opensource Flash project: Easy Musicplayer For Flash <http://emff.sourceforge.net/>

You can use the HTML5 <audio> tag.

I liked dacracot's answer... here is a similar solution in jQuery:

function Play(sound) {
    $("#sound_").remove()
    $('body').append('<embed id="sound_" autostart="true" hidden="true" src="/static/sound/' + sound + '.wav" />');
}

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

See http://www.w3schools.com/html/html5_audio.asp for more details.

If you are using Mootools, there is the MooSound plugin.

There is a far more simpler solution to this rather than having to resort to plug-ins. IE has it's own bgsound property and there is another way you can make it work for all other browsers. Check out my tutorial here = http://www.andy-howard.com/how-to-play-sounds-cross-browser-including-ie/index.html

For a cross browser solution with wav files I would suggest to make an <audio> tag default and then go for the <embed> solution that @dacracot suggested before here if the user is in IE, you can check it easily with a little search here in SO.