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

0 Comments

Write a Comment