BackgroundAudioManager background audio
1. Property description
(1) BackgroundAudioManager class attributes
The BackgroundAudioManager class is the globally unique background audio manager. It can be obtained through the API function wx.getBackgroundAudioManager. When the applet switches to the background, if the audio is in the playing state, it can continue to play. But the background state cannot manipulate the audio playback state by calling API.
Note: Starting from version 6.7.2 of the WeChat client , if you need to continue playing audio after the applet is switched to the background, you need to configure properties in app.json . It can take effect directly on the development version and the trial version, and the official version needs to be reviewed. requiredBackgroundModes
Table [] BackgroundAudioManager class attribute name
| Attribute name |
Types of |
Description |
| src |
string |
Audio data source ( starting to support cloud file ID from 2.2.3 ). The default is an empty string. When a new src is set, it will automatically start playing. The currently supported formats are m4a, aac, mp3, and wav . |
| startTime |
number |
The position where the audio starts to play (unit: s ). |
| title |
string |
Audio title, used for native audio player audio title (required). The share function in the native audio player, and the shared card title will also use this value. |
| epname |
string |
The album name, the sharing function in the native audio player, and the shared card profile will also use this value. |
| singer |
string |
The name of the artist, the sharing function in the native audio player, and the card profile shared will also use this value. |
| coverImgUrl |
string |
Cover image URL , used as background image of native audio player. The share function in the native audio player, the card layout and background shared will also use this image. |
| webUrl |
string |
The page link, the sharing function in the native audio player, and the shared card profile will also use this value. |
| protocol |
string |
Audio protocol. The default value is'http ' , setting'hls' can support playing live audio of HLS protocol. |
| duration |
number |
The length of the current audio (unit: s ), only returned when there is a valid src . (Read only) |
| currentTime |
number |
The playback position of the current audio (unit: s ), only returned when there is a valid src . (Read only) |
| paused |
boolean |
Whether it is currently paused or stopped. (Read only) |
| buffered |
number |
The time the audio has been buffered, only to ensure that the content has been buffered from the current playing time to this time. (Read only) |
(2) BackgroundAudioManager class method
All class methods of BackgroundAudioManager are shown in table [].
Table【】BackgroundAudioManager class method description
| Method name |
Description |
| BackgroundAudioManager.play() |
play music |
| BackgroundAudioManager.pause() |
Pause music |
| BackgroundAudioManager.seek(number currentTime) |
Jump to the specified location |
| BackgroundAudioManager.stop() |
Stop music |
| BackgroundAudioManager.onCanplay(function callback) |
Monitor the background audio to enter the playable state event. But it does not guarantee smooth playback later |
| BackgroundAudioManager.onWaiting(function callback) |
Monitor audio loading events. Triggered when the audio needs to stop and load due to insufficient data |
| BackgroundAudioManager.onError(function callback) |
Listen to the background audio playback error event |
| BackgroundAudioManager.onPlay(function callback) |
Monitor background audio playback events |
| BackgroundAudioManager.onPause(function callback) |
Listen for background audio pause events |
| BackgroundAudioManager.onSeeking(function callback) |
Monitor the background audio start jump operation event |
| BackgroundAudioManager.onSeeked(function callback) |
Monitor the background audio to complete the jump operation event |
| BackgroundAudioManager.onEnded(function callback) |
Monitor the background audio natural playback end event |
| BackgroundAudioManager.onStop(function callback) |
Listen to the background audio stop event |
| BackgroundAudioManager.onTimeUpdate(function callback) |
Monitor the background audio playback progress update event, only the applet will call back when it is in the foreground. |
| BackgroundAudioManager.onNext(function callback) |
Listen to the event that the user clicks the next song in the system music playback panel ( iOS only ) |
| BackgroundAudioManager.onPrev(function callback) |
Monitor the user's click on the previous song event in the system music playback panel ( iOS only ) |
2. 编码测试
新建backgroundAudio页面，在WXML中添加如下代码：
<!-- demo3.9 backgroundAudio页面 backgroundAudio.wxml-->
<view class='container'>
<view class='page-body'>
< text class='h1'>背景音频BackgroundAudioManager编码测试</ text >
<view class='demo-box'>
<view class="btn-area">
<view class="title">点击下方switch开启或关闭背景音乐</view>
<view class="tc">注意：离开当前页面后背景音乐将保持播放，只有完全关闭小程序才停止（点击右上角胶囊按钮的关闭仍然播放）</view>
设置音乐
<text wx:if="{
{switchStatus}}">开启</text>
<text wx:else>关闭</text>
<switch bindchange="switchChange" checked />
</view>
</view>
</view>
</view>页面的逻辑处理JS代码如下：
// demo3.9 backgroundAudio页面 backgroundAudio.js
const backgroundAudioManager = wx.getBackgroundAudioManager() //获取背景音频实例
backgroundAudioManager.title = '欢快的背景'
backgroundAudioManager.singer = 'toky'
backgroundAudioManager.coverImgUrl = '' //封面图 URL
// 设置了 src 之后会自动播放（src为云开发中云存储空间文件的链接）
backgroundAudioManager.src = 'https://6465-demo-p9hhp-1300526081.tcb.qcloud.la/toky/
backgroundmusic.mp3?sign=db2895a2030cea0242a274d23354cf04&t=1575194113'
var that = backgroundAudioManager
// 背景音乐循环的方法
// 1、onEnded监听播放自然结束
backgroundAudioManager.onEnded(function() {
// 2、必须重新设置src才能循环之后会自动播放
backgroundAudioManager.src = 'https://6465-demo-p9hhp-1300526081.tcb.qcloud.la/toky/
backgroundmusic.mp3?sign=db2895a2030cea0242a274d23354cf04&t=1575194113'
})
Page({
data: { switchStatus: true },
switchChange: function(e) {
let switchStatus = e.detail.value//获取switch开关状态
this.setData({
switchStatus: switchStatus
})
if (switchStatus) {
backgroundAudioManager.play()//播放
} else {
backgroundAudioManager.pause()//暂停
}
}
})
当然，仅仅使用以上代码这时开发工具中还会提示一个错误，如图【】所示。
图【】开发工具提示需在app.json中进行权限配置
app.json中的requiredBackgroundModes属性是用于配置小程序的后台权限的，其属性值是一个String类型的数组，在app.json中添加如下代码：
"requiredBackgroundModes": [
"audio",
"location"
],
通过真机调试可以看到运行效果如图【】所示。
（a）进入页面默认播放 （b）点开悬浮窗 （c）关闭switch暂停播放 （d）后台播放
图【】BackgroundAudioManager背景音频编码测试