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

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.

jMP3aims to fix all that!

Listen to this sound:
 sound.mp3

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

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

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

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 Playercompatible with jMP3 here)
2. Then, grab the jMP3 plugin(you do have jQueryalready as well, yes?)
3. Set the path to singlemp3player.swf in jMP3
4. Include jQuery& the jMP3 plugin scripts in the< HEAD> your page

<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/jquery/jmp3/jquery.jmp3.js"></script>



5. Initialize MP3 player on individual IDs (for customization), or generic classes (for lists of files)

<script type="text/javascript">
 $(document).ready(function(){
  // default options
  $(".mp3").jmp3();
  // custom options
  $("#mysong").jmp3({
   backcolor: "000000",
   forecolor: "00ff00",
   width: 200,
   showdownload: "true"
  });
 });
</script>



6. Rock out!

• UPDATE11/9/06 - Mike Alsup has put out a fine enhancementto jMP3 that is unobtrusive and adds more configuration options. Check out his other jQuery worktoo.
• UPDATEv0.2.1 - Eolas workaround implemented (thanks Kurt!) and jQuery object replaces "$" (thx Sam)
  »If you downloaded v0.2 earlier, please replace your jquery.jmp3.js file with the current version
• v0.2 - thrown togethercreated by Sean Oon 10/10/2006
• Tested on IE6, Firefox 1.5.0.7, Opera 8.54& 9.02 and IE7 RC1
• Highly customizable (thanks to Jeroen's modular code), as seen in above examples
• My first jQuery plugin! I< 3 jQuery
• DONE!TODO: implement working Eolasworkaround for those 90%ers using IE.
  The ones on http://jquery.com/docs/Cookbook/just don't seem to do it

Download jMP3 Now

»» Read My blog.

»» Follow me on Twitter.

»» Like jMP3? Please rate it on the jQuery Pluginspage.