午夜91福利视频,午夜成人在线观看,午夜在线视频免费观看,午夜福利短视频,精品午夜成人免费视频APP

小程序模板網

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

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

一.小知識

1.wx.getBackgroundAudioPlayerState(OBJECT)：獲取后臺音樂播放狀(zhuang)態(tai)。

 

[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)控制音樂播放進度。

 

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

 

 

6.wx.onBackgroundAudioPlay(CALLBACK)監聽音樂(le)播放(fang)。

7.wx.onBackgroundAudioPause(CALLBACK)監聽音(yin)樂(le)暫停。

8.wx.onBackgroundAudioStop(CALLBACK)監(jian)聽(ting)音樂停(ting)止(zhi)。


二.案(an)例

 

[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">暫停(ting)</button>  
  4.     <button type="primary" bindtap="listenerButtonSeek">設置播放(fang)進度</button>  
  5.     <button type="primary" bindtap="listenerButtonStop">停止播放(fang)</button>  
  6.     <button type="primary" bindtap="listenerButtonGetPlayState">獲取播(bo)放狀態</button>  
  7. </view></span>  

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




易優小(xiao)程序（企業版）+靈活(huo)api+前后代碼開源 碼云倉庫:
本文地址：//www.jinyoudianli.com/wxmini/doc/course/18168.html 復制鏈接 如需(xu)定制(zhi)請聯系易優客服(fu)咨詢：

工作日 8:30-12:00 14:30-18:00
周六(liu)及部分節(jie)假(jia)日提供值班(ban)服(fu)務(wu)

易小優
轉(zhuan)人(ren)工(gong) ×