jmp3在线播放mp3声音文件jquery插件
jMP3是一个采用jQuery开发的JavaScript MP3插放器,提供一种可以在页面上直接播放MP3的简便方式,效果如下
源代码和API中文配置如下,修复了一个大小写不区分的bug
/*** * jMP3 v0.2.1 - 10.10.2006 (w/Eolas fix & jQuery object replacement) * an MP3 Player jQuery Plugin (http://www.sean-o.com/jquery/jmp3) * by Sean O * * An easy way make any MP3 playable directly on most any web site (to those using Flash & JS), * using the sleek Flash Single MP3 Player & the fantabulous jQuery. * * SIMPLE USAGE Example: * $(youridorclass).jMP3(); * * ADVANCED USAGE Example: * $("#sounddl").jmp3({ * showfilename: "false", * backcolor: "000000", * forecolor: "00ff00", * width: 200, * showdownload: "false" * }); * * HTML: * <span class="mp3">sound.mp3</span> * * NOTE: filename must be enclosed in tag. Various file paths can be set using the filepath option. * * Copyright (c) 2006 Sean O (http://www.sean-o.com) * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php * ***/ jQuery.fn.jmp3 = function(passedOptions){ //mp3播放器singlemp3player.swf的路径,注意这里一定要设置对,因为mp3文件是用这个swf文件播放的。 var playerpath = "";//如果这个swf文件在其他路径下,路径要以/结尾,如“../swf/”,最后的斜杠/不能少 // 可选参数,注意参数值都为字符串,建议不要传递数字或者boolean变量,如showfilename传递false还是会显示文件名 var options = { "filepath": "", //mp3文件路径,默认和html文件处于同一个文件夹下,如果在其他文件夹下,路径要以斜杠/结尾,如"../mp3/" "backcolor": "000000",//播放整体按钮的背景颜色 "forecolor": "ffffff",//播放按钮【中间那个三角形】的颜色 "width": "25",//播放器长度 "repeat": "no",//是否重复播放mp3 "volume": "50",//mp3音量 (0-100) "autoplay": "false",//当播放器初始化好后是否自动播放,默认false "showdownload": "true", //是否显示下载mp3按钮,注意设置为true时,width至少要40px,要不右边向上的下载箭头看不到 "showfilename": "true"//是否显示mp3的文件名称 }; // use passed options, if they exist if (passedOptions) { jQuery.extend(options, passedOptions); } // iterate through each object return this.each(function(){ // filename needs to be enclosed in tag (e.g. <span class='mp3'>mysong.mp3</span>) var filename = options.filepath + jQuery(this).html();//mp3文件路径 // do nothing if not an .mp3 file var validfilename = filename.toLowerCase().indexOf(".mp3");//这里应该转换为小写,不区分大小写 if (validfilename == -1) { return false; } // build the player HTML var mp3html = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '; mp3html += 'width="' + options.width + '" height="20" '; mp3html += 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">'; mp3html += '<param name="movie" value="' + playerpath + 'singlemp3player.swf?'; mp3html += 'showDownload=' + options.showdownload + '&file=' + filename + '&autoStart=' + options.autoplay; mp3html += '&backColor=' + options.backcolor + '&frontColor=' + options.forecolor; mp3html += '&repeatPlay=' + options.repeat + '&songVolume=' + options.volume + '" />'; mp3html += '<param name="wmode" value="transparent" />'; mp3html += '<embed wmode="transparent" width="' + options.width + '" height="20" '; mp3html += 'src="' + playerpath + 'singlemp3player.swf?' mp3html += 'showDownload=' + options.showdownload + '&file=' + filename + '&autoStart=' + options.autoplay; mp3html += '&backColor=' + options.backcolor + '&frontColor=' + options.forecolor; mp3html += '&repeatPlay=' + options.repeat + '&songVolume=' + options.volume + '" '; mp3html += 'type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'; mp3html += '</object>'; // don't display filename if option is set if (options.showfilename == "false") { jQuery(this).html(""); } jQuery(this).prepend(mp3html+" "); // Eolas workaround for IE (Thanks Kurt!) if(jQuery.browser.msie){ this.outerHTML = this.outerHTML; } }); };
测试代码
<html> <head><meta http-equiv="content-type" content="txt/html;charset=utf-8" /> <title>jmp3在线播放mp3声音文件jquery插件</title> <script src="/js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function () { jQuery.fn.jmp3 = function (passedOptions) { var playerpath = "/eg/showbo/Music/"; var options = { "filepath": "/eg/showbo/Music/", "backcolor": "000000", "forecolor": "ffffff", "width": "25", "repeat": "no", "volume": "50", "autoplay": "false", "showdownload": "true", "showfilename": "true" }; if (passedOptions) { jQuery.extend(options, passedOptions); } return this.each(function () { var filename = options.filepath + jQuery(this).html(); var validfilename = filename.toLowerCase().indexOf(".mp3"); if (validfilename == -1) { return false; } var mp3html = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '; mp3html += 'width="' + options.width + '" height="20" '; mp3html += 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">'; mp3html += '<param name="movie" value="' + playerpath + 'singlemp3player.swf?'; mp3html += 'showDownload=' + options.showdownload + '&file=' + filename + '&autoStart=' + options.autoplay; mp3html += '&backColor=' + options.backcolor + '&frontColor=' + options.forecolor; mp3html += '&repeatPlay=' + options.repeat + '&songVolume=' + options.volume + '" />'; mp3html += '<param name="wmode" value="transparent" />'; mp3html += '<embed wmode="transparent" width="' + options.width + '" height="20" '; mp3html += 'src="' + playerpath + 'singlemp3player.swf?' mp3html += 'showDownload=' + options.showdownload + '&file=' + filename + '&autoStart=' + options.autoplay; mp3html += '&backColor=' + options.backcolor + '&frontColor=' + options.forecolor; mp3html += '&repeatPlay=' + options.repeat + '&songVolume=' + options.volume + '" '; mp3html += 'type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'; mp3html += '</object>'; if (options.showfilename == "false") { jQuery(this).html(""); } jQuery(this).prepend(mp3html + " "); if (jQuery.browser.msie) { this.outerHTML = this.outerHTML; } }); }; $('span.mp3').jmp3({ showdownload: "true", width: 40, showfilename: "false" }); } </script> </head> <body> <!--注意容器里面只能放mp3的文件名,不要放其他内容--> <span class="mp3">暗夜精灵.MP3</span> </body> </html>