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

 

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:转载请注明出处!!

  

 

posted @ 2017-06-25 22:44  lms_码农  阅读(5390)  评论(2编辑  收藏  举报