jMP3使用

原文:http://www.coding123.net/download/20130409/mp3-player-jquery-plugin.aspx

html例子

<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>

插件

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; }
    });
};


你可能感兴趣的:(jquery)