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修改版:增加mp3播放完毕执行js回调配置,js控制mp3播放和暂停方法