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

Question

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?

Clothilde

Glad you found your solution, but independent of that, you may want to consider converting those .wav files to .mp3 files. If lower the sound quality just a bit you can get the file sizes down from anywhere from 1/3 to 1/10th the size of a wave file. Might make things a little more responsive in playing sounds. – Shona

Answer 1

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);
    }
//======================================================================

Kevin

I never understand down votes. This works. I have it deployed in my application. Why does it deserve a down vote? – Kevin

I don't know why you were down voted, maybe for the use of the words "real audio" or "quicktime"..?? Maybe the person who downvoted you had no clue about how it was done? As for me, +1, your code is just about the same as the one used in the jQuery plugin stated in the most accepted answer... – Alate

Sometimes I think it is because I wrote the code rather than called current popular API, which as you said, does the exact same thing. – Kevin

great solution to my problem as well. +1. – Practicable

however it doesn't seem to play the sound file in FF3.0. works in Chrome 3, IE7. – Practicable

This is too slow on all windows browsers that I have tested. It works fine on mac though. – Gutenberg

I've tried this in FF5 with QuickTime installed and it didn't work. – Unblown

Answer 2

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

Almedaalmeeta

The jQuery plugin link responds with a 403. – Acheron

Second link in answer is dead - "This site can’t be reached". – Mannuela

@Mannuela Every single answer on this question is long outdated at this point. These days, you'd want to use the universally supported HTML5 audio APIs. I've closed this question as a duplicate of a more up-to-date one. – Almedaalmeeta

Answer 3

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.

Underlie

Answer 4

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/

Estriol

But I cannot find any flash solutions that will play WAV files. It appears flash only supports MP3. I'll look at scriptaculous's plugin, but I hate to include a whole extra library for this one bit of functionality. – Clothilde

Answer 5

You can use the HTML5 <audio> tag.

Antioch

The question specifically asked for a "Cross-platform, cross-browser" solution. HTML5 <audio> tag does not work in IE8-, Android 2.2-, iOS Safari 3.2- or Opera Mini: caniuse.com/#feat=audio – Enantiomorph

NB in 2018 HTML5 Audio is supported by all but Opera. – Supervene

Answer 6

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" />');
}

Propound

Answer 7

<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.

Surrejoinder

Answer 8

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

Pearce

Answer 9

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

Originality

Your solution looks interesting, I will give it a try. Note, there is a comment on the page you linked to indicating that in IE11, the audio is running in an endless loop. Is this still a problem? Is there a way to avoid it? – Metaphase

Answer 10

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.

Sauternes