Play sound file using JQuery Sound Plugin

Posted by Vipin Kumar Rajput on Aug 1, 2010 in Developement, Miscellaneous |

This JQuery sound plugin provides the utility to play the audio file in background without showing the player on UI and stop the running audio file.
Plugin soundPlay function is parameterized and you can pass different argument to initialize the player. You can pass url of sound file, playerId and command as options to override the default values of soundPlay.
url: Location of sound file.
playerId: id of hidden player.
command: play or stop what action is to be performed.
Download Demo
View Demo
Following is the example to play and stop a sound file:-

First you need to include the jquery.sound.js plugin file.
Then bind the html elements to soundPlay function with specific command

<script type="text/javascript" src="js/jquery.sound.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#playLink').click(function() {
$.fn.soundPlay({url: 'music/I_Like_It_I_Love_It.mid',
playerId: 'embed_player',
command: 'play'});
$("#sound_file_name").html("I_Like_It_I_Love_It.mid");
});
$('#stopLink').click(function() {
$.fn.soundPlay({playerId: 'embed_player', command: 'stop'});
});
});
</script>

HTML code: Define the html elements that is to be bind with JQuery sound plugin.

<div id="container">
<div id="player-ui">
<div><span style="float:left">Sound File:</span><span id="sound_file_name"> </span></div>
<div>
<a href="javascript://"  id="playLink">
<img src="images/play.png" alt="Play" title="Play" />
</a>
<a href="javascript://"  id="stopLink">
<img src="images/stop.png" alt="Stop" title="Stop" />
</a>
</div>
</div>
</div>

Download a Demo

Enjoy playing sound files.

9 Responses to “Play sound file using JQuery Sound Plugin”

Rick says:
August 11, 2010 at 11:20 am

Doesn’t play in IE7.
Vipin Kumar Rajput says:
October 1, 2010 at 12:59 pm

Thanks for having a look on jquery sound plugin. Checked the same on IE7, it working fine. May be you need to install QuickTime player plugin to your browser.
Arsen says:
April 29, 2011 at 1:00 am

Hey! Nice plugin…very easy to set up and use.

I have a question about it, however. Is it possible to pause the sound instead of just stopping it?

Thanks!
Aguito says:
July 2, 2011 at 2:27 am

Any way to set sound volume?
Aguito says:
July 2, 2011 at 2:34 am

Solved.

For future reference,
the straight way, in the plugin file (jquery.sound.js), line 33
add volume=”X” (0<X<100) to the embed tag.

Also, Vipin it would be nice if you add an option for this to the plugin.

Thank you very much, very simple and useful plugin!!!
Person says:
July 24, 2011 at 12:45 pm

Nice, but … requires QT Player. This is a deal-killer. Chrome brings up this ugly “The QuickTime Player needs your permission to run” dialog now, ostensibly for security purposes. Looks good, otherwise. This… http://plugins.jquery.com/project/SoundFX … is the only jquery code I’ve found to add audio and soundfx to websites via Flash (without having to know or use Flash).