欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 教程

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

发布：2017-12-15 08:57浏览： 次来源：网络 作者：tianshu

一.小知识

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

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

 

[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)

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

 

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

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

 

[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: 'https://sc1.111ttt.com/2016/1/09/28/202280605509.mp3',  
  35.             title: '青云志',  
  36.             //图片地址  
  37.             coverImgUrl: 'https://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>  



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





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有