录音、音频播放控制和背景音乐
- 一、录音
-
- [1.1、wx.startRecord(Object object)](#1.1、wx.startRecord(Object object))
- [1.2、wx.stopRecord(Object object)](#1.2、wx.stopRecord(Object object))
- [1.3、RecorderManager wx.getRecorderManager()](#1.3、RecorderManager wx.getRecorderManager())
- 1.4、示例
- 二、音频播放
-
- [2.1、wx.stopVoice(Object object)](#2.1、wx.stopVoice(Object object))
- [2.2、wx.setInnerAudioOption(Object object)](#2.2、wx.setInnerAudioOption(Object object))
- [2.3、wx.playVoice(Object object)](#2.3、wx.playVoice(Object object))
- [2.4、wx.pauseVoice(Object object)](#2.4、wx.pauseVoice(Object object))
- [2.5、wx.getAvailableAudioSources(Object object)](#2.5、wx.getAvailableAudioSources(Object object))
- [2.6、WebAudioContext wx.createWebAudioContext()](#2.6、WebAudioContext wx.createWebAudioContext())
- [2.7、MediaAudioPlayer wx.createMediaAudioPlayer()](#2.7、MediaAudioPlayer wx.createMediaAudioPlayer())
- [2.8、InnerAudioContext wx.createInnerAudioContext(Object object)](#2.8、InnerAudioContext wx.createInnerAudioContext(Object object))
- [2.9、AudioContext wx.createAudioContext(string id, Object this)](#2.9、AudioContext wx.createAudioContext(string id, Object this))
- 2.10、示例
- 三、背景音乐
-
- [3.1、wx.stopBackgroundAudio(Object object) (过期)](#3.1、wx.stopBackgroundAudio(Object object) (过期))
- [3.2、wx.seekBackgroundAudio(Object object)(过期)](#3.2、wx.seekBackgroundAudio(Object object)(过期))
- [3.3、wx.playBackgroundAudio(Object object)(过期)](#3.3、wx.playBackgroundAudio(Object object)(过期))
- [3.4、wx.pauseBackgroundAudio(Object object)(过期)](#3.4、wx.pauseBackgroundAudio(Object object)(过期))
- [3.5、wx.onBackgroundAudioStop(function listener)(过期)](#3.5、wx.onBackgroundAudioStop(function listener)(过期))
- [3.6、wx.onBackgroundAudioPlay(function listener)(过期)](#3.6、wx.onBackgroundAudioPlay(function listener)(过期))
- [3.7、wx.onBackgroundAudioPause(function listener)](#3.7、wx.onBackgroundAudioPause(function listener))
- [3.8、wx.getBackgroundAudioPlayerState(Object object)(过期)](#3.8、wx.getBackgroundAudioPlayerState(Object object)(过期))
- [3.9、BackgroundAudioManager wx.getBackgroundAudioManager()](#3.9、BackgroundAudioManager wx.getBackgroundAudioManager())
- 3.10、BackgroundAudioManager
- 3.11、示例
一、录音
1.1、wx.startRecord(Object object)
开始录音。当主动调用 wx.stopRecord,或者录音超过1分钟时自动结束录音。当用户离开小程序时,此接口无法调用。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
success |
function | 否 | 接口调用成功的回调函数 | |
fail |
function | 否 | 接口调用失败的回调函数 | |
complete |
function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success回调函数
参数:Object res
| 属性 | 类型 | 说明 |
|---|---|---|
| tempFilePath | string | 录音文件的临时路径 (本地路径) |
js
wx.startRecord({
success (res) {
const tempFilePath = res.tempFilePath
}
})
setTimeout(function () {
wx.stopRecord() // 结束录音
}, 10000)
1.2、wx.stopRecord(Object object)
停止录音。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
success |
function | 否 | 接口调用成功的回调函数 | |
fail |
function | 否 | 接口调用失败的回调函数 | |
complete |
function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
js
wx.startRecord({
success (res) {
const tempFilePath = res.tempFilePath
}
})
setTimeout(function () {
wx.stopRecord() // 结束录音
}, 10000)
1.3、RecorderManager wx.getRecorderManager()
获取全局唯一的录音管理器 RecorderManager。RecorderManager常用函数如下:
| 接口 | 功能和用途 |
|---|---|
| RecorderManager.start(Object object) | 开始录音 |
| RecorderManager.pause() | 暂停录音 |
| RecorderManager.resume() | 继续录音 |
| RecorderManager.stop() | 停止录音 |
| RecorderManager.onStart(function listener) | 监听录音开始事件 |
| RecorderManager.onResume(function listener) | 监听录音继续事件 |
| RecorderManager.onPause(function listener) | 监听录音暂停事件 |
| RecorderManager.onStop(function listener) | 监听录音结束事件 |
| RecorderManager.onFrameRecorded(function listener) | 监听已录制完指定帧大小的文件事件。如果设置了 frameSize,则会回调此事件。 |
| RecorderManager.onError(function listener) | 监听录音错误事件 |
| RecorderManager.onInterruptionBegin(function listener) | 监听录音因为受到系统占用而被中断开始事件。以下场景会触发此事件:微信语音聊天、微信视频聊天。此事件触发后,录音会被暂停。pause 事件在此事件后触发 |
| RecorderManager.onInterruptionEnd(function listener) | 监听录音中断结束事件。在收到 interruptionBegin 事件之后,小程序内所有录音会暂停,收到此事件之后才可再次录音成功。 |
js
const recorderManager = wx.getRecorderManager()
recorderManager.onStart(() => {
console.log('recorder start')
})
recorderManager.onPause(() => {
console.log('recorder pause')
})
recorderManager.onStop((res) => {
console.log('recorder stop', res)
const { tempFilePath } = res
})
recorderManager.onFrameRecorded((res) => {
const { frameBuffer } = res
console.log('frameBuffer.byteLength', frameBuffer.byteLength)
})
const options = {
duration: 10000,
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'aac',
frameSize: 50
}
recorderManager.start(options)
1.4、示例
本例通过recorderManager.wxml中的5个按钮来调用RecorderManager录音管理器的录音、暂停、继续录音、停止录音和播放录音功能。在录制好音频之后也可以上传到服务器,本例只是把录制好的音频存放在手机临时目录,然后用来播放。
html
<view>
<button bind:tap="start" class="btn">开始录音</button>
<button bind:tap="pause" class="btn">暂停录音</button>
<button bind:tap="resume" class="btn">继续录音</button>
<button bind:tap="stop" class="btn">停止录音</button>
<button bind:tap="play" class="btn">播放录音</button>
</view>
js
const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()
Page({
data: {
},
onLoad: function() {
},
start: function(){
const options = {
duration: 10000,//录音时长
sampleRate: 16000,//采样率
numberOfChannels: 1,//录音通道数
encodeBitRate: 96000,//编码码率
format: "mp3",//音频格式acc/mp4
frameSize: 50//指定帧大小,单位KB
}
wx.authorize({ //授权接口
scope: "scope.record",
success: ()=>{
console.log("录音授权成功")
this.setData({
status: 2 //第一次成功授权以后,状态切换为2
})
recorderManager.start(options)
recorderManager.onStart(()=>{
console.log("recorder start")
})
recorderManager.onError((res)=>{
console.log(res)
})
},
fail: ()=>{
console.log("第一次录音授权失败")
wx.showModal({
title: "提示",
content: "您未授权录音,功能将无法使用",
showCancel: true,
confirmText: "授权",
confirmColor: "#52a2d8",
success: (res)=>{
if(res.confirm) {
wx.openSetting({
success: (res)=>{
console.log(res.authSetting)
if(!res.authSetting["scope.addPhoneCalendar.record"]){
//未设置录音授权
console.log("未设置录音授权")
wx.showModal({
title:"提示",
content: "您未授权录音,功能将无法使用",
showCancel: false,
success: (res)=>{}
})
} else {
console.log("设置录音授权成功") //第二次才授权成功
this.setData({
status: 2
})
recorderManager.start(options)
recorderManager.onStart(()=>{
console.log("recorder start")
})
recorderManager.onError((res)=>{
console.log(res)
})
}
},
fail: ()=>{
console.log("授权设置录音失败")
}
})
} else if (res.cancel) {
console.log("cancel")
}
},
fail: ()=> [
console.log("openfail")
]
})
}
})
},
pause: function() {
recorderManager.pause()
recorderManager.onPause(()=>{
console.log("暂停录音")
})
},
resume: function(){
recorderManager.resume()
recorderManager.onStart(()=>{
console.log("重新开始录音")
})
recorderManager.onError((res)=>{
console.log(res)
})
},
stop: function() {
recorderManager.stop()
recorderManager.onStop((res)=>{
this.tempFilePath = res.tempFilePath;
console.log("停止录音", res.tempFilePath)
const {tempFilePath} = res
})
},
play: function() {
innerAudioContext.autoplay = true
innerAudioContext.src = this.tempFilePath
innerAudioContext.onPlay(()=>{
console.log("开始播放")
})
innerAudioContext.onError((res)=>{
console.log(res.errMsg)
console.log(res.errCode)
})
}
})

二、音频播放
2.1、wx.stopVoice(Object object)
结束播放语音。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
success |
function | 否 | 接口调用成功的回调函数 | |
fail |
function | 否 | 接口调用失败的回调函数 | |
complete |
function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
js
wx.startRecord({
success (res) {
const tempFilePath = res.tempFilePath
wx.playVoice({
filePath: tempFilePath,
})
setTimeout(() => { wx.stopVoice() }, 5000)
}
})
2.2、wx.setInnerAudioOption(Object object)
设置 InnerAudioContext 的播放选项。设置之后对当前小程序全局生效。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
mixWithOther |
boolean | true | 否 | 是否与其他音频混播,设置为 true 之后,不会终止其他应用或微信内的音乐 |
obeyMuteSwitch |
boolean | true | 否 | (仅在 iOS 生效)是否遵循静音开关,设置为 false 之后,即使是在静音模式下,也能播放声音 |
speakerOn |
boolean | true | 否 | true 代表用扬声器播放,false 代表听筒播放,默认值为 true。 |
success |
function | 否 | 接口调用成功的回调函数 | |
fail |
function | 否 | 接口调用失败的回调函数 | |
complete |
function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
2.3、wx.playVoice(Object object)
开始播放语音。同时只允许一个语音文件正在播放,如果前一个语音文件还没播放完,将中断前一个语音播放。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
filePath |
string | 是 | 需要播放的语音文件的文件路径 (本地路径) | |
duration |
number | 60 | 否 | 指定播放时长,到达指定的播放时长后会自动停止播放,单位:秒 |
success |
function | 否 | 接口调用成功的回调函数 | |
fail |
function | 否 | 接口调用失败的回调函数 | |
complete |
function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
js
wx.startRecord({
success (res) {
const tempFilePath = res.tempFilePath
wx.playVoice({
filePath: tempFilePath,
complete () { }
})
}
})
2.4、wx.pauseVoice(Object object)
暂停正在播放的语音。再次调用 wx.playVoice 播放同一个文件时,会从暂停处开始播放。如果想从头开始播放,需要先调用 wx.stopVoice。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
success |
function | 否 | 接口调用成功的回调函数 | |
fail |
function | 否 | 接口调用失败的回调函数 | |
complete |
function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
js
wx.startRecord({
success (res) {
const tempFilePath = res.tempFilePath
wx.playVoice({
filePath: tempFilePath
})
setTimeout(() => { wx.pauseVoice() }, 5000)
}
})
2.5、wx.getAvailableAudioSources(Object object)
获取当前支持的音频输入源。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
success |
function | 否 | 接口调用成功的回调函数 | |
fail |
function | 否 | 接口调用失败的回调函数 | |
complete |
function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success回调函数
参数:Object res
| 属性 | 类型 | 说明 |
|---|---|---|
audioSources |
Array.<string> | 支持的音频输入源列表,可在 RecorderManager.start() 接口中使用。返回值定义参考 https://developer.android.com/reference/kotlin/android/media/MediaRecorder.AudioSource |
合法值如下:
| 合法值 | 说明 |
|---|---|
| auto | 自动设置,默认使用手机麦克风,插上耳麦后自动切换使用耳机麦克风,所有平台适用 |
| buildInMic | 手机麦克风,仅限 iOS |
| headsetMic | 耳机麦克风,仅限 iOS |
| mic | 麦克风(没插耳麦时是手机麦克风,插耳麦时是耳机麦克风),仅限 Android |
| camcorder | 同 mic,适用于录制音视频内容,仅限 Android |
| voice_communication | 同 mic,适用于实时沟通,仅限 Android |
| voice_recognition | 同 mic,适用于语音识别,仅限 Android |
2.6、WebAudioContext wx.createWebAudioContext()
创建 WebAudio 上下文。
js
const audioCtx = wx.createWebAudioContext()
const loadAudio = (url) => {
return new Promise((resolve) => {
wx.request({
url,
responseType: 'arraybuffer',
success: res => {
console.log('res.data', res.data)
audioCtx.decodeAudioData(res.data, buffer => {
resolve(buffer)
}, err => {
console.error('decodeAudioData fail', err)
reject()
})
},
fail: res => {
console.error('request fail', res)
reject()
}
})
})
}
const play = () => {
loadAudio('xxx-test.mp3').then(buffer => {
let source = audioCtx.createBufferSource()
source.buffer = buffer
source.connect(audioCtx.destination)
source.start()
}).catch(() => {
console.log('fail')
})
}
play()
2.7、MediaAudioPlayer wx.createMediaAudioPlayer()
创建媒体音频播放器对象 MediaAudioPlayer 对象,可用于播放视频解码器 VideoDecoder 输出的音频。
js
// 创建视频解码器,具体参数见 createVideoDecoder 文档
const videoDecoder = wx.createVideoDecoder()
// 创建媒体音频播放器
const mediaAudioPlayer = wx.createMediaAudioPlayer()
// 启动视频解码器
videoDecoder.start()
// 启动播放器
mediaAudioPlayer.start().then(() => {
// 添加播放器音频来源
mediaAudioPlayer.addAudioSource(videoDecoder).then(res => {
videoDecoder.getFrameData() // 建议在 requestAnimationFrame 里获取每一帧视频数据
console.log(res)
})
// 移除播放器音频来源
mediaAudioPlayer.removeAudioSource(videoDecoder).then()
// 停止播放器
mediaAudioPlayer.stop().then()
// 销毁播放器
mediaAudioPlayer.destroy().then()
// 设置播放器音量
mediaAudioPlayer.volume = 0.5
})
2.8、InnerAudioContext wx.createInnerAudioContext(Object object)
创建内部 audio 上下文 InnerAudioContext 对象。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
useWebAudioImplement |
boolean | false | 否 | 是否使用 WebAudio 作为底层音频驱动,默认关闭。对于短音频、播放频繁的音频建议开启此选项,开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长,因此对于长音频建议关闭此选项。 |
返回值:InnerAudioContext
InnerAudioContext 音频资源不会自动释放,因此如果不再需要使用音频,请及时调用 InnerAudioContext.destroy() 释放资源,避免内存泄漏。
js
const innerAudioContext = wx.createInnerAudioContext({
useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动,默认关闭。对于短音频、播放频繁的音频建议开启此选项,开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长,因此对于长音频建议关闭此选项
})
innerAudioContext.src = 'https://wx_test.mp3'
innerAudioContext.play() // 播放
innerAudioContext.pause() // 暂停
innerAudioContext.stop() // 停止
innerAudioContext.destroy() // 释放音频资源
2.9、AudioContext wx.createAudioContext(string id, Object this)
创建 audio 上下文 AudioContext 对象。
- string id:audio 组件的 id
- Object this:在自定义组件下,当前组件实例的this,以操作组件内 audio 组件
AudioContext常用函数如下:
| 接口 | 功能和用途 |
|---|---|
| AudioContext.setSrc(string src) | 设置音频地址 |
| AudioContext.play() | 播放音频 |
| AudioContext.pause() | 暂停音频 |
| AudioContext.seek(number position) | 跳转到指定位置 |
2.10、示例
html
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
<slider bindchange="change" min="0" max="160" value="{{time}}" color="blue" selected-color="red" show-value="true"></slider>
<button class="b1" type="primary" size="mini" bind:tap="audioPlay">播放</button>
<button class="b1" type="primary" size="mini" bind:tap="audioPause">暂停</button>
js
Page({
data: {
time: 0,
poster: "http://127.0.0.1:8080/download/xuwei.jpeg",
name: "此时此刻",
author: "许巍",
src: "http://127.0.0.1:8080/download/111.mp3"
},
onReady: function() {
this.audioCtx = wx.createAudioContext("myAudio")
},
audioPlay: function() {
this.audioCtx.play()
},
audioPause: function() {
this.audioCtx.pause()
},
audio14: function() {
this.audio14.seek(0)
},
change: function(e) {
this.audioCtx.seek(e.detail.value)
}
})

三、背景音乐
3.1、wx.stopBackgroundAudio(Object object) (过期)
停止播放音乐。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
success |
function | 否 | 接口调用成功的回调函数 | |
fail |
function | 否 | 接口调用失败的回调函数 | |
complete |
function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
js
wx.stopBackgroundAudio()
3.2、wx.seekBackgroundAudio(Object object)(过期)
控制音乐播放进度。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
position |
number | 是 | 音乐位置,单位:秒 | |
success |
function | 否 | 接口调用成功的回调函数 | |
fail |
function | 否 | 接口调用失败的回调函数 | |
complete |
function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
js
wx.seekBackgroundAudio({
position: 30
})
3.3、wx.playBackgroundAudio(Object object)(过期)
使用后台播放器播放音乐。对于微信客户端来说,只能同时有一个后台音乐在播放。当用户离开小程序后,音乐将暂停播放;当用户在其他小程序占用了音乐播放器,原有小程序内的音乐将停止播放。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
dataUrl |
string | 是 | 音乐链接,目前支持的格式有 m4a, aac, mp3, wav | |
title |
string | 否 | 音乐标题 | |
coverImgUrl |
string | 否 | 封面URL | |
success |
function | 否 | 接口调用成功的回调函数 | |
fail |
function | 否 | 接口调用失败的回调函数 | |
complete |
function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
js
wx.playBackgroundAudio({
dataUrl: '',
title: '',
coverImgUrl: ''
})
3.4、wx.pauseBackgroundAudio(Object object)(过期)
暂停播放音乐。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
success |
function | 否 | 接口调用成功的回调函数 | |
fail |
function | 否 | 接口调用失败的回调函数 | |
complete |
function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
js
wx.pauseBackgroundAudio()
3.5、wx.onBackgroundAudioStop(function listener)(过期)
监听音乐停止事件。
3.6、wx.onBackgroundAudioPlay(function listener)(过期)
监听音乐播放事件。
3.7、wx.onBackgroundAudioPause(function listener)
监听音乐暂停事件。
3.8、wx.getBackgroundAudioPlayerState(Object object)(过期)
获取后台音乐播放状态。
参数:Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
success |
function | 否 | 接口调用成功的回调函数 | |
fail |
function | 否 | 接口调用失败的回调函数 | |
complete |
function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
js
wx.getBackgroundAudioPlayerState({
success (res) {
const status = res.status
const dataUrl = res.dataUrl
const currentPosition = res.currentPosition
const duration = res.duration
const downloadPercent = res.downloadPercent
}
})
3.9、BackgroundAudioManager wx.getBackgroundAudioManager()
获取全局唯一的背景音频管理器。 小程序切入后台,如果音频处于播放状态,可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。
从微信客户端6.7.2版本开始,若需要在小程序切后台后继续播放音频,需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效,正式版还需通过审核。
返回值:BackgroundAudioManager
3.10、BackgroundAudioManager
BackgroundAudioManager实例对象是通过wx.getBackgroundAudioManager()接口
获取的,它是小程序官方发布的接口,功能强大,包含其他背景音乐处理接口的所有功能。
BackgroundAudioManager属性如下:
| 类型 | 属性 | 说明 |
|---|---|---|
| string | src |
音频的数据源(2.2.3 开始支持云文件ID)。默认为空字符串,当设置了新的 src 时,会自动开始播放,目前支持的格式有 m4a, aac, mp3, wav。 |
| number | startTime |
音频开始播放的位置(单位:s) |
| string | title |
音频标题,用于原生音频播放器音频标题(必填)。原生音频播放器中的分享功能,分享出去的卡片标题,也将使用该值。 |
| string | epname |
专辑名,原生音频播放器中的分享功能,分享出去的卡片简介,也将使用该值。 |
| string | singer |
歌手名,原生音频播放器中的分享功能,分享出去的卡片简介,也将使用该值。 |
| string | coverImgUrl |
封面图 URL,用于做原生音频播放器背景图。原生音频播放器中的分享功能,分享出去的卡片配图及背景也将使用该图。 |
| string | webUrl |
页面链接,原生音频播放器中的分享功能,分享出去的卡片简介,也将使用该值。 |
| string | protocol |
音频协议。默认值为 'http',设置 'hls' 可以支持播放 HLS 协议的直播音频。 |
| number | playbackRate |
播放速度。范围 0.5-2.0,默认为 1。(Android 需要 6 及以上版本) |
| number | duration |
当前音频的长度(单位:s),只有在有合法 src 时返回。(只读) |
| number | currentTime |
当前音频的播放位置(单位:s),只有在有合法 src 时返回。(只读) |
| boolean | paused |
当前是否暂停或停止。(只读) |
| number | buffered |
音频已缓冲的时间,仅保证当前播放时间点到此时间点内容已缓冲。(只读) |
| string | referrerPolicy |
origin: 发送完整的referrer; no-referrer: 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本; |
| string | referrerPath |
关联页面路径。设置后,当点击播放器上的小程序跳转链接时,将跳转到这个关联页面路径(实验特性,目前仅Android端支持) |
| string | audioType |
音频类型。可设置 "audio" 和 "music" 两种值,默认为 "audio"。不同音频类型对应的播放器样式不一样(实验特性,目前仅iOS和Android端支持) |
BackgroundAudioManager方法如下:
| 方法 | 说明 |
|---|---|
| BackgroundAudioManager.play() | 播放音乐 |
| BackgroundAudioManager.pause() | 暂停音乐 |
| BackgroundAudioManager.seek(number currentTime) | 跳转到指定位置 |
| BackgroundAudioManager.stop() | 停止音乐 |
| BackgroundAudioManager.onCanplay(function listener) | 监听背景音频进入可播放状态事件。 但不保证后面可以流畅播放 |
| BackgroundAudioManager.onWaiting(function listener) | 监听音频加载中事件。当音频因为数据不足,需要停下来加载时会触发 |
| BackgroundAudioManager.onError(function listener) | 监听背景音频播放错误事件 |
| BackgroundAudioManager.onPlay(function listener) | 监听背景音频播放事件 |
| BackgroundAudioManager.onPause(function listener) | 监听背景音频暂停事件 |
| BackgroundAudioManager.onSeeking(function listener) | 监听背景音频开始跳转操作事件 |
| BackgroundAudioManager.onSeeked(function listener) | 监听背景音频完成跳转操作事件 |
| BackgroundAudioManager.onEnded(function listener) | 监听背景音频自然播放结束事件 |
| BackgroundAudioManager.onStop(function listener) | 监听背景音频停止事件 |
| BackgroundAudioManager.onTimeUpdate(function listener) | 监听背景音频播放进度更新事件,只有小程序在前台时会回调。 |
| BackgroundAudioManager.onNext(function listener) | 监听用户在系统音乐播放面板点击下一曲事件 |
| BackgroundAudioManager.onPrev(function listener) | 监听用户在系统音乐播放面板点击上一曲事件 |
js
const backgroundAudioManager = wx.getBackgroundAudioManager()
backgroundAudioManager.title = '此时此刻'
backgroundAudioManager.epname = '此时此刻'
backgroundAudioManager.singer = '许巍'
backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
// 设置了 src 之后会自动播放
backgroundAudioManager.src = 'https://wx_test.mp3'
3.11、示例
本例在古诗《将进酒》页面中添加朗读古诗的背景音乐,实现开始朗读、暂停朗读和继续朗读3个功能。程序是通过backgroundAudioManager实例调用播放接口和暂停接口来实现上述功能。
html
<view class="zong">
<view>将进酒</view>
<view class="zz">唐代:李白</view>
<view class="content">
<view>君不见,黄河之水天上来,奔流到海不复回。</view>
<view>君不见,高堂明镜悲白发,朝如青丝暮成雪。</view>
<view>人生得意须尽欢,莫使金樽空对月。</view>
<view>天生我材必有用,千金散尽还复来。</view>
<view>烹羊宰牛且为乐,会须一饮三百杯。</view>
<view>岑夫子,丹丘生,将进酒,杯莫停。</view>
<view>与君歌一曲,请君为我倾耳听。</view>
<view>钟鼓馔玉不足贵,但愿长醉不复醒。</view>
<view>古来圣贤皆寂寞,惟有饮者留其名。</view>
<view>陈王昔时宴平乐,斗酒十千恣欢谑。</view>
<view>主人何为言少钱,径须沽取对君酌。</view>
<view>五花马,千金裘</view>
<view>呼儿将出换美酒,与尔同销万古愁。</view>
</view>
</view>
<view class="bg">
<button type="primary" class="bg1" bind:tap="play">
听朗读
</button>
<button type="primary" class="bg2" bind:tap="pause">
暂停朗读
</button>
<button type="primary" class="bg3" bind:tap="continue">
继续朗读
</button>
</view>
js
const backgroundAudioManager = wx.getBackgroundAudioManager()
backgroundAudioManager.title = "将进酒"
backgroundAudioManager.epname = "将进酒"
backgroundAudioManager.singer = "李白"
Page({
data: {
},
onShow: function() {
},
play: function() {
//设置了src后会自动播放
backgroundAudioManager.src = "http://127.0.0.1:8080/download/111.mp3"
},
pause: function() {
backgroundAudioManager.pause()
},
continue: function() {
backgroundAudioManager.play()
}
})
css
view {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
button {
margin-top: 20rpx;
}
