jSound - jQuery plugin

06.Oct.2012  |  Posted by admin  |  Filed under JQuery Plugins

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

Related PostsjQuery plugins download free sound audio buttons effect html5 hover move leave onclick click focusin focusout onblur music mp3 ogg


Write a Comment



We are a team, that resides in Germany (please, do forgive our bad English) and we have developed an international based and uncomplicated software for users, who do not know (or do not like to know) much about all this programs like HTML, PHP, SqLite, JS, Browser differences etc.. Users who like  to ....Read More
Havalite CMS in english language Havalite CMS in deutscher Sprache هافالايت العربية لنشر المقالات