Cross Browser Sound in JavaScript

When working on an upcoming project I had the need to play sound through JavaScript. The method had to be cross-browser compatible, so I couldn't use any IE only calls.

Happily, I found a nice API called SoundManager2 which uses Flash to play the sound and is called through JavaScript. The API is very easy to use and below is a sample of how to use it.

The below code would be put inside the head tag of your web page.

<script type="text/javascript" src="soundmanager2-jsmin.js"></script>
<script type="text/javascript">

soundManager.url = 'soundmanager2.swf'; // override default SWF url
soundManager.debugMode = false;
soundManager.consoleOnly = false;

soundManager.onload = function() {
  // soundManager is initialised, ready to use. Create a sound for this demo page.
  soundManager.createSound('aDrumSound','button-0.mp3');
}</script>

The part of the above code that you will be most interested in is the last line. The soundManager.createSound('aDrumSound','button-0.mp3'); is what actually loads the sound file.

The below code will cause the sound to play.

soundManager.play('aDrumSound');

You can go to the project page by clicking here and get more information about the API. Also, you can download the files needed to use the API (including documentation and demos) here.

The library would be very useful in many applications including JavaScript games. If you create any cool applications using the API I would love to hear about it. You can post a blog entry about it when you create a free account (once you login just click on "Create content" => "Blog Entry") on this blog.

In researching sound playing for my next JavaScript game, I ended up writing sound sound playing JavaScript myself.
I was aware of all the other sound playing JavaScript code out there, including the one specified in this post, but my main goal was to use Flash as a last resort.
Instead I used sound support built into the browser before anything else.

For example Opera 9 supports the WHATWG Audio object. IE supports the bgsound attribute.
Safari, FireFox, depending on platform and installed plugins has varying built-in support for playing sound.

These things (when detected) are used before anything else. Then as a last resort Flash is used.

This has many advantages (not requiring flash being the main one) but a few disadvantages.

Tonight when I get home from work I'll write up a blog post with the code and share :)

Tired using the code and viewed using IE . . . received: A Runtime Error . . . 'soundManager' is undefined

What did I do wrong?

You will need to make sure that you have the .js and the .swf files in the correct folder so that they are referenced (also, in my code I used the small .js file, so make sure you use that file from the downloaded API). One other thing to make sure is that you are referencing the sound file correctly (the sound file should be a MP3).

If you still have problems let me know.

Hello,
Please provide me a code using javascript, which runs in all browsers to play audio.
Thanks in advance.

When I use IE 6 there is an alert message saying: Press ok to contunue loading the content of the page. Can anyone have a solution?

Hi, did anyone get a solution for this??

Best regards
Bianca

I haven't seen this problem, but I don't have a machine with IE 6 on it. I'll have access to one tomorrow and I'll look into this.

Sound with flash is best in usability, the avg. user of computer cannot work with plugins or troubleshoot, nor can he upgrade huge software every few weeks to maintain the plugins. Flash is around 2mb and solves most browser and os sound issues.

Anyway here is one that works without flash. The plugin problems remain.
http://www.zwitserloot.com/files/soundkit/soundcheck.html

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.