小程序模板网

微信小程序之音乐控制播放(audio的API)

一.小知识

1.wx.getBackgroundAudioPlayerState(OBJECT):获取后台音乐播放状态。

 

[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()停止播放音乐。

 

 

6.wx.onBackgroundAudioPlay(CALLBACK)监听音乐播放。

7.wx.onBackgroundAudioPause(CALLBACK)监听音乐暂停。

8.wx.onBackgroundAudioStop(CALLBACK)监听音乐停止。


二.案例

 

[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">设置播放进度</button>  
  5.     <button type="primary" bindtap="listenerButtonStop">停止播放</button>  
  6.     <button type="primary" bindtap="listenerButtonGetPlayState">获取播放状态</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. //获取应用实例    
  3. Page({  
  4.     data:{  
  5.     // text:"这是一个页面"  
  6.     },  
  7.     onLoad:function(options){  
  8.         // 页面初始化 options为页面跳转所带来的参数  
  9.         /**  
  10.          * 监听音乐播放  
  11.          */  
  12.         wx.onBackgroundAudioPlay(function() {  
  13.             console.log('onBackgroundAudioPlay')  
  14.         })  
  15.   
  16.         /**  
  17.          * 监听音乐暂停  
  18.          */  
  19.         wx.onBackgroundAudioPause(function() {  
  20.             console.log('onBackgroundAudioPause')  
  21.         })  
  22.   
  23.         /**  
  24.          * 监听音乐停止  
  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.     * 播放状态  
  43.     */  
  44.     listenerButtonGetPlayState: function() {  
  45.         wx.getBackgroundAudioPlayerState({  
  46.             success: function(res) {  
  47.               console.log(res)  
  48.               //duration 总时长  
  49.               //currentPosition 当前播放位置  
  50.               //status 播放状态  
  51.               //downloadPercent 下载状况 100 即为100%  
  52.               //dataUrl 当前播放音乐地址  
  53.             }  
  54.         })   
  55.     },  
  56.     /**  
  57.     * 监听button暂停按钮  
  58.     */  
  59.     listenerButtonPause: function() {  
  60.        wx.pauseBackgroundAudio();  
  61.     },  
  62.     /**  
  63.     * 设置进度  
  64.     */  
  65.     listenerButtonSeek: function() {  
  66.         wx.seekBackgroundAudio({  
  67.             position: 30  
  68.         })  
  69.     },  
  70.     /**  
  71.     *停止播放   
  72.     */  
  73.     listenerButtonStop: function() {  
  74.         wx.stopBackgroundAudio()  
  75.     }  
  76. })</span>  




易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18168.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询