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：转载请注明出处！！