jmp3修改版:增加mp3播放完毕执行js回调配置,js控制mp3播放和暂停方法

jmp3修改版:增加mp3播放完毕执行js回调配置,js控制mp3播放和暂停方法

  从http://www.sean-o.com/jquery/jmp3下载的flash源文件,修改了fla,新增3项功能

  • 1)增加Mp3播放完毕后,如果需要执行js回调,可以通过配置PlayFinish来传递需要执行的js回调函数名称,注意函数需要在window作用域下。
  • 2)PlaySong方法,播放mp3,如果需要播放指定次数后停止不在播放,可以结合第1)点的回调,控制播放次数。
  • 3)PauseSong方法,暂停播放mp3


  fla源文件AS脚本主要修改部分,主要是修改了mp3player影片剪辑中的AS代码

sndObject.onSoundComplete = function() {
    //传递了mp3播放完毕的回调函数名称则进行调用
    if(_root.PlayFinish)flash.external.ExternalInterface.call(_root.PlayFinish);
    if(repeatPlay == "true") {
        pausePos = 0.001;
        playSong();
    } else {
        progressBar._width = 0.1;
        pauseSong(0.001);
    }
}
//提供给mp3player组件加载完毕注册事件用
//注册JS控制mp3播放的接口
flash.external.ExternalInterface.addCallback("PlaySong", null, playSong);
//注册JS控制mp3暂停的接口
flash.external.ExternalInterface.addCallback("PauseSong",null, pauseSong);



  jquery.jmp3.js主要修改部分查看示例部分,由于没几行代码,为了演示方便,就直接贴出来了,只对修改部分做了说明,其他参数配置参考这个:jmp3在线播放mp3声音文件jquery插件

<html>
<head>
    <title>jmp3在线播放mp3声音文件jquery插件,增加mp3播放完毕执行js回调配置,js控制mp3播放和暂停方法</title>
</head>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script>
    function playend() { alert('mp3 播放完毕!') }
    window.onload = function () {
/***
*  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
* PlayFinish callback Event,PlaySong,PauseSong Method extend by Showbo http://www.w3dev.cn/
*/
        jQuery.fn.jmp3 = function (passedOptions) {
            if (passedOptions === 'PlaySong' || passedOptions === 'PauseSong') //新增的扩展jmp3 2个方法,播放mp3和暂停mp3
               return this.each(function () {
                    var id = $(this).data('mp3playerid');
                    if (!id) return; //未执行过jmp3初始化调用这2个方法退出
                    var player = document[id] || window[id]; //获取flash容器
                    player[passedOptions](); //调用注册的方法
                });

            var playerpath = "";
            var options = {
                "filepath": "",
                "backcolor": "000000",
                "forecolor": "ffffff",
                "width": "25",
                "repeat": "no",
                "volume": "50",
                "autoplay": "false",
                "showdownload": "true",
                "showfilename": "true",
                //新增配置
                "PlayFinish": ""//mp3每次播放完执行的回调函数名称,注意函数是window作用域下的
            };
            if (passedOptions) {
                jQuery.extend(options, passedOptions);
            }
            return this.each(function () {
                var filename = options.filepath + jQuery(this).html();
                var validfilename = filename.indexOf(".mp3");
                if (validfilename == -1) { return false; }
                var mp3playID = 'player' + new Date().getTime(); //存储对应flash的唯一id/name
                $(this).data('mp3playerid', mp3playID);
                var mp3html = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="' + mp3playID + '" ';
                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 allowScriptAccess="always" 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 + '&PlayFinish=' + options.PlayFinish + '" ';
                mp3html += 'type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="' + mp3playID + '" />';
                mp3html += '</object>';
                if (options.showfilename == "false") { jQuery(this).html(""); }
                jQuery(this).html(mp3html + " ");
                //if (window.ActiveXObject) { this.outerHTML = this.outerHTML; }
            });
        };
        $('span.mp3').jmp3({ showdownload: "true", width: 40, showfilename: "false", PlayFinish: "playend" });
    }
</script>
<body>
<span class="mp3">sound.mp3</span>
<input type="button" value="Play" onclick="$('span.mp3').jmp3('PlaySong')" /> <input type="button" value="Stop" onclick="$('span.mp3').jmp3('PauseSong')" />
</body>
</html>

jmp3修改版fla源文件及示例下载

加支付宝好友偷能量挖...


原创文章,转载请注明出处:jmp3修改版:增加mp3播放完毕执行js回调配置,js控制mp3播放和暂停方法

评论(0)Web开发网
阅读(982)喜欢(0)JavaScript/Ajax开发技巧