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

淩亂°似流年 2021-09-12 07:30 985阅读 0赞

一.小知识

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

![20170525145217682][]

wx.getBackgroundAudioPlayerState({ success: function(res) { var status = res.status var dataUrl = res.dataUrl var currentPosition = res.currentPosition var duration = res.duration var downloadPercent = res.downloadPercent } })

2.wx.playBackgroundAudio(OBJECT)

![20170525160054140][]

wx.playBackgroundAudio({ dataUrl: '', title: '', coverImgUrl: '' })

3.wx.pauseBackgroundAudio()暂停播放音乐。

4.wx.seekBackgroundAudio(OBJECT)控制音乐播放进度。

![20170525161041894][]

wx.seekBackgroundAudio({ position: 30 })

5. wx.stopBackgroundAudio() 停止播放音乐。

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

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

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

二.案例

<view class="zn-uploadimg"> <button type="primary" bindtap="listenerButtonPlay">播放</button> <button type="primary" bindtap="listenerButtonPause">暂停</button> <button type="primary" bindtap="listenerButtonSeek">设置播放进度</button> <button type="primary" bindtap="listenerButtonStop">停止播放</button> <button type="primary" bindtap="listenerButtonGetPlayState">获取播放状态</button> </view>

.zn-uploadimg{ padding:1rem; } .zn-uploadimg button{ margin:10px; }

//record.js //获取应用实例 Page({ data:{ // text:"这是一个页面" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 /** * 监听音乐播放 */ wx.onBackgroundAudioPlay(function() { console.log('onBackgroundAudioPlay') }) /** * 监听音乐暂停 */ wx.onBackgroundAudioPause(function() { console.log('onBackgroundAudioPause') }) /** * 监听音乐停止 */ wx.onBackgroundAudioStop(function() { console.log('onBackgroundAudioStop') }) },//播放音乐 listenerButtonPlay: function() { wx.playBackgroundAudio({ //播放地址 dataUrl: 'http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3', title: '青云志', //图片地址 coverImgUrl: 'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7' }) }, /** * 播放状态 */ listenerButtonGetPlayState: function() { wx.getBackgroundAudioPlayerState({ success: function(res) { console.log(res) //duration 总时长 //currentPosition 当前播放位置 //status 播放状态 //downloadPercent 下载状况 100 即为100% //dataUrl 当前播放音乐地址 } }) }, /** * 监听button暂停按钮 */ listenerButtonPause: function() { wx.pauseBackgroundAudio(); }, /** * 设置进度 */ listenerButtonSeek: function() { wx.seekBackgroundAudio({ position: 30 }) }, /** *停止播放 */ listenerButtonStop: function() { wx.stopBackgroundAudio() } })

![20170525155858997][]

[20170525145217682]: /images/20210813/b1e1d7048aba4f618d630b1cfe725025.png
[20170525160054140]: /images/20210813/0c953c00f1a74aed8bd9f2b31b1c70b2.png
[20170525161041894]: /images/20210813/9a1750cbc07443599bdd6824c63aca98.png
[20170525155858997]: /images/20210813/4f462eee53694258bf9857cf451a4fb7.png