【源码分享】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键的点击事件
                     a=1;    //点击上下一曲是会自动播放，所以重置a为1,这样下次播放键点击时，为暂停效果
                     mui.fire(h,'pre',{

                         })
                 })
                 document.getElementById("next").addEventListener("tap",function(){
　　　　　　　　　　　　　　　　　　//next键的点击事件
                     a=1;
                     mui.fire(h,'next',{

                         })
                 })
             });

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

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

本次分享就到这里

谢谢大家的观看

 

觉得不错请点赞

 

希望能对大家有所启发

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

PS：转载请注明出处！！