Pages

▼

Monday, 3 August 2015

基于jQuery的Javascript MP3在线播放器:jMP3


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>

  5. Initialize MP3 player on individual IDs (for customization), or generic classes (for lists of files)
    6. <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!

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 together created 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
»» Read My blog
from http://www.sean-o.com/blog/
at