Sean O » jQuery plugins » jMP3 » Sean O's javaScript MP3 player / jQuery Plugin

19 March 2024
As featured in the brand new book, JavaScript and AJAX For Dummies

What is it?

jMP3 (javaScript MP3 player) is an easy way make any MP3 playable directly on most any web site (to those with Flash & javaScript enabled),
using the sleek Flash Single MP3 Player & the fantabulous jQuery.


The Del.icio.us Playtagger is OK for basic purposes, but is not very configurable, can often incur startup delays, and is just not very attractive.


jMP3 aims to fix all that!


Demos

Listen to this sound:
sound.mp3


Listen to, scrub and download this sound (conceal the filename):
sound.mp3


Listen to MP3s from any website (hide download option... let's not get the MAFIAA involved!):
yourepitiful.mp3


The call to this player is simply ignored if not an mp3 (see source):
broken.mp4


Instructions

  1. First, download the lightweight (3k) Flash Single MP3 Player
    (Feb 2007: looks like Jeroen has updated his player and removed the old version...
    grab a local copy of the original Single MP3 Player compatible with jMP3 here)
  2. Then, grab the jMP3 plugin (you do have jQuery already as well, yes?)
  3. Set the path to singlemp3player.swf in jMP3
  4. Include jQuery & the jMP3 plugin scripts in the <HEAD> your page
  5. <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/jquery/jmp3/jquery.jmp3.js"></script>

  6. Initialize MP3 player on individual IDs (for customization), or generic classes (for lists of files)
  7. <script type="text/javascript">
    	$(document).ready(function(){
    		// default options
    		$(".mp3").jmp3();
    		// custom options
    		$("#mysong").jmp3({
    			backcolor: "000000",
    			forecolor: "00ff00",
    			width: 200,
    			showdownload: "true"
    		});
    	});
    </script>

  8. Rock out!

Plugin Information

Download jMP3 Now

»» Read My blog.

»» Follow me on Twitter.

»» Like jMP3? Please rate it on the jQuery Plugins page.

Terms Of Use
»» If you use this on your site, just drop me a line at: and show me how you're using it!
If you're in need of hosting, check out Dreamhost's web hosting accounts.


Questions? Comments? Random Blather?


Credits & Inspiration:

http://xwerocode.blogspot.com/2006/08/my-first-jquery-plugin.html
http://jeroenwijering.com/?item=Flash_Single_MP3_Player
http://www.jasons-toolbox.com

See Also...

jQueryHelp - Code Reference application for jQuery functions

Page contents & code © 2006-2010 Sean O
Last modified 01/11/10