【源码分享】mui实现简单的手机音乐播放器

 

mui实现简单的手机音乐播放器

 

　　　　最近先来无事，我用mui写了一个可以跨页面控制的音乐播放器。主要功能有上一曲，下一曲，播放，暂停，感兴趣的可以继续看下去。

　　　　说的总是不实在，直接上源码，有兴趣的可以读下注释。

　　　　

 

　　　　

1首页代码 　　

　　　　　　

　　　　　　①首页的html代码

　　　　　　

<a>
                <i id="bofang" class="iconfont icon-play-o"></i>   <!--就是一个播放按钮没啥特殊的-->
            </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代码

<img id="pre" src="img/a9t.png" alt="" />　　//上一曲
<img id="play" src="img/a9p.png" alt="" /> //播放按钮
<img id="next" src="img/a9n.png" alt="" />　　//下一曲

 

　　　　  ②播放页的js代码

 

mui.plusReady(function(){
                var a=1;    //定义一个计数器
                var h = plus.webview.getWebviewById(plus.runtime.appid);
                var self = plus.webview.currentWebview();  //获取当前页面窗口对象
                var name = self.name;    //获取name参数
                document.getElementById("play").addEventListener("tap",function(){
                    //play键的点击事件
                    if(!name){name=1;}    //通过传入的参数判断是否存在音频对象
                    else if(a==3)a=1    //没什么用，只是让a不至于太大，只在1,2循环
                    mui.fire(h,'send',{    //自定义页面间的send事件
                               pause:a,    
                        })
                    if(name===1){name++;return}//name
                    a++;                //改变计数器
                })
                document.getElementById("pre").addEventListener("tap",function(){
　　　　　　　　　　　　　　　　　　//pre键的点击事件 17                     a=1;    //点击上下一曲是会自动播放，所以重置a为1,这样下次播放键点击时，为暂停效果
                    mui.fire(h,'pre',{
                               
                        })
                })
                document.getElementById("next").addEventListener("tap",function(){
　　　　　　　　　　　　　　　　　　//next键的点击事件 23                     a=1;
                    mui.fire(h,'next',{
                               
                        })
                })
            });

 

　　　　这次代码写的仓促，应该还存在许多的bug，大家有发现可以跟我一起来探讨，有什么意见和建议请在下方留言

 

　　　　今天的分享就到这里了，谢谢观看，希望能对大家有所帮助。

 
本次分享就到这里

   谢谢大家的观看   

 

觉得不错请点赞

 

希望能对大家有所启发

有更好的方法或不同的意见请在留言区跟我交流

PS：转载请注明出处！！