微信小程序-背景音乐BackgroundAudioManager
目录
微信小程序 背景音乐BackgroundAudioManager
BackgroundAudioManager背景音频
- 属性说明
（1）BackgroundAudioManager类属性
BackgroundAudioManager类为 全局唯一 的背景音频管理器。可通过API函数wx.getBackgroundAudioManager获取，当小程序切入后台时，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。
注意：从微信客户端
6.7.2
版本开始，若需要在小程序切后台后继续播放音频，需要在
中配置
requiredBackgroundModes
属性。开发版和体验版上可以直接生效，正式版还需通过审核。
表【】BackgroundAudioManager类属性名
| 属性名 | 类型 | 说明 |
| src | string | 音频的数据源（ 2.2.3 开始支持云文件 ID ）。默认为空字符串，当设置了新的 src 时，会自动开始播放，目前支持的格式有 m4a, aac, mp3, wav 。 |
| startTime | number | 音频开始播放的位置（单位： s ）。 |
| title | string | 音频标题，用于原生音频播放器音频标题（必填）。原生音频播放器中的分享功能，分享出去的卡片标题，也将使用该值。 |
| epname | string | 专辑名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。 |
| singer | string | 歌手名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。 |
| coverImgUrl | string | 封面图 URL ，用于做原生音频播放器背景图。原生音频播放器中的分享功能，分享出去的卡片配图及背景也将使用该图。 |
| webUrl | string | 页面链接，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。 |
| protocol | string | 音频协议。默认值为 ‘http’ ，设置 ‘hls’ 可以支持播放 HLS 协议的直播音频。 |
| duration | number | 当前音频的长度（单位： s ），只有在有合法 src 时返回。（只读） |
| currentTime | number | 当前音频的播放位置（单位： s ），只有在有合法 src 时返回。（只读） |
| paused | boolean | 当前是否暂停或停止。（只读） |
| buffered | number | 音频已缓冲的时间，仅保证当前播放时间点到此时间点内容已缓冲。（只读） |
（2）BackgroundAudioManager类方法
BackgroundAudioManager所有类方法如表【】所示。
表【】BackgroundAudioManager类方法说明
| 方法名 | 说明 |
| BackgroundAudioManager.play() | 播放音乐 |
| BackgroundAudioManager.pause() | 暂停音乐 |
| BackgroundAudioManager.seek(number currentTime) | 跳转到指定位置 |
| BackgroundAudioManager.stop() | 停止音乐 |
| BackgroundAudioManager.onCanplay(function callback) | 监听背景音频进入可播放状态事件。 但不保证后面可以流畅播放 |
| BackgroundAudioManager.onWaiting(function callback) | 监听音频加载中事件。当音频因为数据不足，需要停下来加载时会触发 |
| BackgroundAudioManager.onError(function callback) | 监听背景音频播放错误事件 |
| BackgroundAudioManager.onPlay(function callback) | 监听背景音频播放事件 |
| BackgroundAudioManager.onPause(function callback) | 监听背景音频暂停事件 |
| BackgroundAudioManager.onSeeking(function callback) | 监听背景音频开始跳转操作事件 |
| BackgroundAudioManager.onSeeked(function callback) | 监听背景音频完成跳转操作事件 |
| BackgroundAudioManager.onEnded(function callback) | 监听背景音频自然播放结束事件 |
| BackgroundAudioManager.onStop(function callback) | 监听背景音频停止事件 |
| BackgroundAudioManager.onTimeUpdate(function callback) | 监听背景音频播放进度更新事件，只有小程序在前台时会回调。 |
| BackgroundAudioManager.onNext(function callback) | 监听用户在系统音乐播放面板点击下一曲事件（仅 iOS ） |
| BackgroundAudioManager.onPrev(function callback) | 监听用户在系统音乐播放面板点击上一曲事件（仅 iOS ） |
- 编码测试
新建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背景音频编码测试