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>