小程序模板網(wǎng)

微信小程序之音樂控制播放（audio的API）

發(fā)布時間：2017-12-15 08:57 所屬欄目：小程序開發(fā)教程

一.小知識

1.wx.getBackgroundAudioPlayerState(OBJECT)：獲取后臺音樂播放狀態(tài)。

 

[html] view plain copy
 
  1. <span style="font-family:Comic Sans MS;">wx.getBackgroundAudioPlayerState({  
  2.     success: function(res) {  
  3.         var status = res.status  
  4.         var dataUrl = res.dataUrl  
  5.         var currentPosition = res.currentPosition  
  6.         var duration = res.duration  
  7.         var downloadPercent = res.downloadPercent  
  8.     }  
  9. })</span>  

 

2.wx.playBackgroundAudio(OBJECT)

 

[html] view plain copy
 
  1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">wx.playBackgroundAudio({  
  2.     dataUrl: '',  
  3.     title: '',  
  4.     coverImgUrl: ''  
  5. })</span>  

 

3.wx.pauseBackgroundAudio()暫停播放音樂。

4.wx.seekBackgroundAudio(OBJECT)控制音樂播放進(jìn)度。

 

[html] view plain copy
 
  1. <span style="font-family:Comic Sans MS;">wx.seekBackgroundAudio({  
  2.     position: 30  
  3. })</span>  
5.wx.stopBackgroundAudio()停止播放音樂。

 

 

6.wx.onBackgroundAudioPlay(CALLBACK)監(jiān)聽音樂播放。

7.wx.onBackgroundAudioPause(CALLBACK)監(jiān)聽音樂暫停。

8.wx.onBackgroundAudioStop(CALLBACK)監(jiān)聽音樂停止。


二.案例

 

[html] view plain copy
 
  1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="zn-uploadimg">  
  2.     <button type="primary" bindtap="listenerButtonPlay">播放</button>  
  3.     <button type="primary" bindtap="listenerButtonPause">暫停</button>  
  4.     <button type="primary" bindtap="listenerButtonSeek">設(shè)置播放進(jìn)度</button>  
  5.     <button type="primary" bindtap="listenerButtonStop">停止播放</button>  
  6.     <button type="primary" bindtap="listenerButtonGetPlayState">獲取播放狀態(tài)</button>  
  7. </view></span>  

[html] view plain copy
 
  1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">.zn-uploadimg{  
  2.     padding:1rem;  
  3. }  
  4. .zn-uploadimg button{  
  5.     margin:10px;  
  6. }</span>  

 

 

[html] view plain copy
 
  1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">//record.js   
  2. //獲取應(yīng)用實(shí)例    
  3. Page({  
  4.     data:{  
  5.     // text:"這是一個頁面"  
  6.     },  
  7.     onLoad:function(options){  
  8.         // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)  
  9.         /**  
  10.          * 監(jiān)聽音樂播放  
  11.          */  
  12.         wx.onBackgroundAudioPlay(function() {  
  13.             console.log('onBackgroundAudioPlay')  
  14.         })  
  15.   
  16.         /**  
  17.          * 監(jiān)聽音樂暫停  
  18.          */  
  19.         wx.onBackgroundAudioPause(function() {  
  20.             console.log('onBackgroundAudioPause')  
  21.         })  
  22.   
  23.         /**  
  24.          * 監(jiān)聽音樂停止  
  25.          */  
  26.         wx.onBackgroundAudioStop(function() {  
  27.             console.log('onBackgroundAudioStop')  
  28.         })  
  29.   
  30.     },//播放音樂  
  31.     listenerButtonPlay: function() {  
  32.         wx.playBackgroundAudio({  
  33.             //播放地址  
  34.             dataUrl: 'http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3',  
  35.             title: '青云志',  
  36.             //圖片地址  
  37.             coverImgUrl: 'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7'  
  38.   
  39.         })  
  40.     },  
  41.     /**  
  42.     * 播放狀態(tài)  
  43.     */  
  44.     listenerButtonGetPlayState: function() {  
  45.         wx.getBackgroundAudioPlayerState({  
  46.             success: function(res) {  
  47.               console.log(res)  
  48.               //duration 總時長  
  49.               //currentPosition 當(dāng)前播放位置  
  50.               //status 播放狀態(tài)  
  51.               //downloadPercent 下載狀況 100 即為100%  
  52.               //dataUrl 當(dāng)前播放音樂地址  
  53.             }  
  54.         })   
  55.     },  
  56.     /**  
  57.     * 監(jiān)聽button暫停按鈕  
  58.     */  
  59.     listenerButtonPause: function() {  
  60.        wx.pauseBackgroundAudio();  
  61.     },  
  62.     /**  
  63.     * 設(shè)置進(jìn)度  
  64.     */  
  65.     listenerButtonSeek: function() {  
  66.         wx.seekBackgroundAudio({  
  67.             position: 30  
  68.         })  
  69.     },  
  70.     /**  
  71.     *停止播放   
  72.     */  
  73.     listenerButtonStop: function() {  
  74.         wx.stopBackgroundAudio()  
  75.     }  
  76. })</span>  




易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://22321a.com/wxmini/doc/course/18168.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢