微信小程序背景音乐BackgroundAudioManager

BackgroundAudioManager背景音频

1. 属性说明

（1）BackgroundAudioManager类属性

BackgroundAudioManager类为全局唯一的背景音频管理器。可通过API函数wx.getBackgroundAudioManager获取，当小程序切入后台时，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。

注意：从微信客户端6.7.2版本开始，若需要在小程序切后台后继续播放音频，需要在app.json 中配置 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）

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背景音频编码测试