jSound – jQuery plugin


JSound 1.0.1 is jQuery plugin for playing sounds on any HTML tag element

JSound works only on modern browser with html5. We always need 2 files as *.mp3 and *.ogg

We implement the jQuery framework and jsound plugin in the head part of our site as follow:

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script language="javascript" src="jsound.js"></script>

First we open jsound.js and declare which tag elements should be used to play audio:

// here I'll use <a>, <p> and <input> tags
  var soundElem = 'a, p, input';

Now we can use the jsound attributes in the defined tags:

<p startSound="country_day"></p>
  <a href="#" hoverSound="beep">let the mouse path over me</a>
<input type="text" name="inputfield" focusInSound="space" focusOutSound="journey" />
// to stop all running sounds use the function stopSounds()
<a href="#" onClick="stopSounds();">Stop all sounds</a>

Here are all attributes

  1. startSound // starts sound when page is complete loaded
  2. loopSound // additional to startSound
  3. hoverSound
  4. leaveSound
  5. clickSound
  6. moveSound
  7. focusInSound
  8. focusOutSound

If you like to use the sound effect to a specified tag without typing the attributes every time, than you can change the allElems variable to TRUE in jsound.js

var soundElem = 'a';
var allElems = true;
var aHover = 'myHoverSound';
var aLeave = 'myLeaveSound';
var aClick = 'myClickSound';

See Demo          Download: jsound.js