mui实现简单的手机音乐播放器
最近先来无事,我用mui写了一个可以跨页面控制的音乐播放器。主要功能有上一曲,下一曲,播放,暂停,感兴趣的可以继续看下去。
说的总是不实在,直接上源码,有兴趣的可以读下注释。
1首页代码
①首页的html代码
1 <a> 2 <i id="bofang" class="iconfont icon-play-o"></i> <!--就是一个播放按钮没啥特殊的--> 3 </a>
②首页的js代码
1 mui.plusReady(function(){
2 p=null; 3 function toPlay(path){ //播放方法 4 p = plus.audio.createPlayer(path);//创建一个音频对象 5 p.play( function () { //成功的回调函数ps:一首歌播放完成后执行 6 if(i==2){ //判断下一曲该播放哪一个 7 i=0; 8 }else{ 9 i++; 10 } 11 toPlay(pat[i]); 12 }, function ( e ) { 13 alert( "Audio play failed: " + e.message );//播放失败的回调函数 14 } ); 15 16 } 17 function toPause(){ //暂停方法 18 p.pause(); 19 } 20 function toResume(){ //继续方法 21 p.resume(); 22 } 23 function to(s){ 24 p.seekTo(s); 25 } 26 var i=0; 27 var pat = ["ziyuan/aaa.mp3", 28 "ziyuan/bbb.mp3", 29 "ziyuan/ccc.mp3"];//曲目数组 30 //播放图标 31 var bofang = document.getElementById("bofang"); 32 bofang.addEventListener("tap",function(e){ 33 e.stopPropagation(); //阻断事件冒泡 34 if(this.className=="iconfont icon-play-o"){ //判断图标的样子 35 //如果已经创建音频对象点击时继续,没有创建者执行play方法 36 if(!p){toPlay(pat[i]);}else{toResume()} 37 this.className="iconfont icon-zanting"; //改变图标样式 38 }else{ 39 toPause(); //暂停方法 40 this.className="iconfont icon-play-o"; 41 } 42 }) 43 44 //播放页 45 document.getElementById("foot").addEventListener("tap",function(){ 46 mui.openWindow({ //打开播放页 id为foot的标签请自行创建,前面html代码没写 47 url:"bofangye.html", 48 id:"bofangye.html", 49 styles:{ 50 top:0, 51 bottom:0, 52 },extras:{ 53 name:p, //将音频对象p传到播放页 54 } 55 }) 56 }) 57 58 //以下三个事件是页面间的事件,是播放页传参数过来通过参数值判断来执行,看不懂请配合播放页代码一起看 59 window.addEventListener('send',function(event){ 60 //监听send事件 61 //获得事件参数 62 var a = event.detail.pause; 63 if(!p){ //判断是否存在p 64 toPlay(pat[i]); //不存在执行play方法 65 }else if(a%2==1){ //根据a的值判断是暂停还是继续 66 toPause(); 67 }else{ 68 toResume(); 69 } 70 }); 71 window.addEventListener('pre',function(event){ 72 // 监听pre事件 73 if(i==0){i=2}else{i--}//i为曲目数组的下标 74 if(p){p.stop();} //音频对象p存在的话停止掉,然后播放下一曲,不存在则直接播放下一曲 75 toPlay(pat[i]); 76 }); 77 window.addEventListener('next',function(event){ 78 //监听next事件 79 if(i==2){ 80 i=0; 81 }else{ 82 i++; 83 } 84 if(p){p.stop()}; 85 toPlay(pat[i]); 86 }); 87 })
2播放页代码
①播放页的html代码
1 <img id="pre" src="img/a9t.png" alt="" /> //上一曲 2 <img id="play" src="img/a9p.png" alt="" /> //播放按钮 3 <img id="next" src="img/a9n.png" alt="" /> //下一曲
②播放页的js代码
1 mui.plusReady(function(){ 2 var a=1; //定义一个计数器 3 var h = plus.webview.getWebviewById(plus.runtime.appid); 4 var self = plus.webview.currentWebview(); //获取当前页面窗口对象 5 var name = self.name; //获取name参数 6 document.getElementById("play").addEventListener("tap",function(){ 7 //play键的点击事件 8 if(!name){name=1;} //通过传入的参数判断是否存在音频对象 9 else if(a==3)a=1 //没什么用,只是让a不至于太大,只在1,2循环 10 mui.fire(h,'send',{ //自定义页面间的send事件 11 pause:a, 12 }) 13 if(name===1){name++;return}//name 14 a++; //改变计数器 15 }) 16 document.getElementById("pre").addEventListener("tap",function(){
//pre键的点击事件 17 a=1; //点击上下一曲是会自动播放,所以重置a为1,这样下次播放键点击时,为暂停效果 18 mui.fire(h,'pre',{ 19 20 }) 21 }) 22 document.getElementById("next").addEventListener("tap",function(){
//next键的点击事件 23 a=1; 24 mui.fire(h,'next',{ 25 26 }) 27 }) 28 });
这次代码写的仓促,应该还存在许多的bug,大家有发现可以跟我一起来探讨,有什么意见和建议请在下方留言
今天的分享就到这里了,谢谢观看,希望能对大家有所帮助。
本次分享就到这里
谢谢大家的观看
觉得不错请点赞
希望能对大家有所启发
有更好的方法或不同的意见请在留言区跟我交流
PS:转载请注明出处!!