【源碼分享】mui實現簡單的手機音樂播放器

時間 2019-12-04

標籤源碼分享 mui 實現簡單手機音樂播放简体版

原文原文鏈接

mui實現簡單的手機音樂播放器html

　　　　最近先來無事，我用mui寫了一個能夠跨頁面控制的音樂播放器。主要功能有上一曲，下一曲，播放，暫停，感興趣的能夠繼續看下去。web

　　　　說的老是不實在，直接上源碼，有興趣的能夠讀下注釋。數組

1首頁代碼　　app

　　　　　　①首頁的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代碼ui

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代碼this

 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             });