Cross-Platform, Cross-Browser Way to Play Sound from JavaScript

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

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

Cross-platform, cross-browser way to play sound using jQuery 1.4?

Don't need any of those. The HTML tag, combined with JavaScript, will do the trick.

<audio id="soundHandle" style="display: none;"></audio>
<script>
  soundHandle = document.getElementById('soundHandle');
  soundHandle.src = '/blah/blah.mp3';
  soundHandle.play();
</script>

What Options Are There for Cross-Browser Compatible Audio?

Frustratingly, there is no universally playable type. WAV comes closest, but it is quite large and is not supported in IE9. You'll need to have multiple types available and choose a type the browser can play.

To do this, use feature detection, not browser detection. The media types that each browser supports will change over time, so your code that assumes Firefox can't play MP3 will probably be outdated a few years from now, when Mozilla adopts it (after the patents expire). Use canPlayType, which indicates if a given format is supported:

var audio = new Audio();
if(audio.canPlayType("audio/mpeg") == "probably") {
    playSound("myMedia.mp3");
} else if(audio.canPlayType("audio/webm") == "probably") {
    playSound("myMedia.webm");
}
// do checks for other types...

Also, if you are writing the audio tag as HTML, you can use multiple <source> tags, and the browser will play the first one it can:

<audio controls="controls">
    <source src="mymedia.ogg" type="audio/ogg" />
    <source src="mymedia.mp3" type="audio/mpeg" />
    Update your browser! This sentence is fallback content for browsers that do not support the audio element at all.
</audio>

If you want to test for Ogg audio support, you probably want to test for Ogg Vorbis specifically. Ogg is a "container" format that can hypothetically use other codecs besides Vorbis and Theora (for example, the Opus format). You can test for Ogg Vorbis like so:

audio.canPlayType('audio/ogg; codecs="vorbis"') == "probably";

Note that canPlayType has three possible return values:

• "probably" - the media type can almost certainly be played
• "maybe" - the media type might be playable. This is what is returned when you ask about general Ogg support in a browser has Ogg support for specific codecs (i.e. Vorbis and Theora). An Ogg file may use a codec that is not supported by the browser, so if you don't specify the codec, the browser can only guess that it might be able to play it.
• "" (the empty string) - the media type is certainly not playable

If you really wanted to test for ogg support, then instead of testing for "probably", you could test for a non-empty string (i.e., test for either "probably" or "maybe"), like so:

// test for *any* Ogg codecs
if(audio.canPlayType("audio/ogg") != "") {  
    playSound("myMedia.ogg");
}

You should test for whatever specific codec your media file uses, e.g., with 'audio/ogg; codecs="vorbis"' for Vorbis. Testing for general Ogg support is not likely to be useful.

Lightweight cross browser solution for playing sound on click

Try one of these.

1. Mike Alsup's jQuery Media plugin
2. jmedia by Christoph Liell

I am unsure about IE7 support though.

Sound in the browser seamlessly with JavaScript

I like to use Sound Manager 2 for this. It depends on Flash. It looks like it hasn't been updated in a while though, so it might not be a good choice if it doesn't already work in all the browsers you care about. Support for the audio tag is getting pretty good.

How to play audio?

If you don't want to mess with HTML elements:

var audio = new Audio('audio_file.mp3');
audio.play();

function play() {
  var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');
  audio.play();
}

<button onclick="play()">Play Audio</button>

How do you play a sound on the web browser?

You can use the <audio> tag combined with JavaScript to play sounds at a given time. You'll need JavaScript, of course, as it's done on the frontend, and hence, with client-side programming.

For example,

<audio style="display: none;" id="notification" preload src="path/to/soundfile">

Then, for the scripting, place this somewhere in any part of your script that requires sound notification to occur:

document.getElementById('notification').play();

For those who recommend Flash as it's supported in IE, note graceful degradation, where, for non-essential things (such as sound notification) we choose to use new, recommended technologies that work on most browsers, instead of using hackish, insecure methods to try to get all browsers to work.

Background sound on action

This is easy with HTML5

 <audio id="mySoundClip">
    <source src="audio/beep.mp3"></source>
    <source src="audio/beep.ogg"></source>
    Your browser isn't invited for super fun audio time.
 </audio>

and the jQuery bit

var audio = $("#mySoundClip")[0];
audio.play();

This will provide support for Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, & IE 9+

---

Related Topics