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

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?

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. — infocyde, Sep 13 '10 at 18:35

score 63 · Accepted Answer · answered Oct 09 '08 at 14:05

63

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

answered Oct 09 '08 at 14:05

dacracot

22,002
26
104
152

15

I never understand down votes. This works. I have it deployed in my application. Why does it deserve a down vote? – dacracot Oct 09 '08 at 17:02
2

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... – Gad Oct 23 '08 at 15:59
1

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. – dacracot Oct 23 '08 at 22:45
1

great solution to my problem as well. +1. – mauris Sep 12 '09 at 05:22
3

however it doesn't seem to play the sound file in FF3.0. works in Chrome 3, IE7. – mauris Sep 12 '09 at 05:25
1

This is too slow on all windows browsers that I have tested. It works fine on mac though. – thenengah Dec 22 '10 at 23:38
1

I've tried this in FF5 with QuickTime installed and it didn't work. – AnnanFay Jul 31 '11 at 09:59

score 9 · Answer 2 · answered Oct 09 '08 at 13:11

9

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

answered Oct 09 '08 at 13:11

ceejayoz

176,543
40
303
368

5

The jQuery plugin link responds with a 403. – Arion Feb 24 '12 at 22:46
Second link in answer is dead - *"This site can’t be reached"*. – Pang Oct 28 '20 at 01:25
@Pang 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. – ceejayoz Oct 28 '20 at 11:54

score 8 · Answer 3 · edited Jan 20 '14 at 17:35

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.

score 7 · Answer 4 · edited May 23 '17 at 12:25

7

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/

edited May 23 '17 at 12:25

Community

1
1

answered Oct 09 '08 at 12:52

Ilya Kochetov

17,988
6
44
60

1

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. – Jake Stevenson Oct 09 '08 at 15:59

score 5 · Answer 5 · answered Oct 07 '10 at 21:14

5

You can use the HTML5 <audio> tag.

answered Oct 07 '10 at 21:14

Alon Gubkin

56,458
54
195
288

The question specifically asked for a "Cross-platform, cross-browser" solution. HTML5 ` – Jasdeep Khalsa Mar 12 '13 at 14:37
NB in 2018 HTML5 Audio is supported by all but Opera. – Aidan Connelly Jan 18 '18 at 09:48

Howard · Answer 6 · 2011-10-13T22:13:00.933

5

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

edited Oct 13 '11 at 22:13

answered Oct 13 '11 at 20:24

Howard

1,389
11
11

score 4 · Answer 7 · answered Dec 10 '12 at 19:28

4

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

answered Dec 10 '12 at 19:28

Andrew Mackenzie

5,477
5
48
70

score 3 · Answer 8 · answered Oct 09 '08 at 14:10

3

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

answered Oct 09 '08 at 14:10

cheeaun

1,283
1
9
10

score 1 · Answer 9 · answered May 13 '14 at 07:56

1

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

answered May 13 '14 at 07:56

Andrew Howard

2,818
5
33
59

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? – Kevin Fegan Nov 09 '16 at 15:20

score 0 · Answer 10 · answered Dec 12 '19 at 16:05

0

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.

answered Dec 12 '19 at 16:05

Hugo

1,662
18
35

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

10 Answers10

Linked

Related