Jul 29, 2010

Play Sounds on Web with SoundManager

Sometimes i hope i can set different sounds on buttons to play onClick OR on mouseOver like events. Now i can do this very easily. I found a new thing named SoundManager, you can insert music in html, Yes now its easy to adding sound to web pages. I am planing to html music player.

Idea

I was searching web about "How to add sound on Mouse events" for my coming article about Camera Flash Effect with Jquery, and got the sound manager download page. Its a very useful thing. Today we will learn how to play sounds on events with JavaScript and HTML.

SoundManager Download

There are two versions of SoundManager, i am using the version V1, working well for me, you can download it from here.

Adding Sounds to SoundManager

Simply paste your audio file (poo.mp3) in audio folder and add code in the sound-config.xml --

<sound id="poo" href="poo.mp3" />

Adding Sound to Web Page

CODE

 <script type='text/javascript' src='script/soundmanager.js'></script>
 
<div>

 <!-- soundManager appends "hidden" Flash to the first DIV on the page. -->

</div>

<script type="text/javascript">soundManagerInit();</script>

<button onclick="soundManager.play('poo')">Play poo</button>

  <div id="debugContainer">

   <!-- debugger output goes here. -->

   <!-- this element can be removed or hidden via CSS as it is optional. -->
  </div>

Demo

You can see the working demo here.

Labels: Flash, Javascript, Sound, Tutorials

By : Motyar+ @motyar