Instructions
- 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) - Then, grab the jMP3 plugin (you do have jQuery already as well, yes?)
- Set the path to singlemp3player.swf in jMP3
- Include jQuery & the jMP3 plugin scripts in the <HEAD> your page
- Initialize MP3 player on individual IDs (for customization), or generic classes (for lists of files)
- Rock out!
<script type="text/javascript" src="/js/jquery/jquery.js"></script> <script type="text/javascript" src="/js/jquery/jmp3/jquery.jmp3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// default options
$(".mp3").jmp3();
// custom options
$("#mysong").jmp3({
backcolor: "000000",
forecolor: "00ff00",
width: 200,
showdownload: "true"
});
});
</script>
Plugin Information
- UPDATE 11/9/06 - Mike Alsup has put out a fine enhancement to jMP3 that is unobtrusive and adds more configuration options. Check out his other jQuery work too.
- UPDATE v0.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 O on 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 Eolas workaround for those 90%ers using IE.
The ones on http://jquery.com/docs/Cookbook/ just don't seem to do it
Download jMP3 Nowfrom http://www.sean-o.com/blog/
