在小程序中,有两个音频播放,一个是InnerAudioContext
(音频),一个是BackgroundAudioManager
(背景音频)
先说说这两个的区别:
InnerAudioContext | BackgroundAudioManager |
---|---|
没有标题 | 必须填写标题 |
没有封面,专辑名,歌手等信息 | 可填封面,专辑名,歌手等信息 |
在小程序进入后台的时候会被暂停 | 在小程序进入后台时依旧会播放 |
手机状态栏不会有信息,微信内没有悬浮标志 | 手机状态栏会有类似于QQ音乐的音乐框,微信内部有悬浮的标志 |
只能通过事件方法进行暂停,销毁 | 用户可以通过状态栏,悬浮窗进行暂停,销毁 |
多次执行会同时播放多个音频 | 多次执行只会重新播放,不会出现多个 |
同一src多次调用会多次播放 | 同一src多次调用不多次播放,不重新播放(不影响播放) |
再说说使用方法
其实两者的使用方法一模一样
写法:
InnerAudioContext
// audio.js
const innerAudioContext = wx.createInnerAudioContext()
Page({
data: {
src: ''
},
onLoad:function(options){
innerAudioContext.autoplay = true
innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
innerAudioContext.onPlay(() => {
console.log('开始播放')
})
innerAudioContext.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
})
innerAudioContext.onPause(
() =>{
console.log('停止播放')
}
)
},
audioPlay: function () {
innerAudioContext.play()
},
audioPause:function(){
innerAudioContext.pause()
}
})
// audio.js
const bgAudioMannager = wx.BackgroundAudioManager()
Page({
data: {
src: ''
},
onLoad:function(options){
bgAudioMannager.autoplay = true
bgAudioMannager.title = '标题';
bgAudioMannager.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
bgAudioMannager.onPlay(() => {
console.log('开始播放')
})
bgAudioMannager.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
})
bgAudioMannager.onPause(
() =>{
console.log('停止播放')
}
)
},
audioPlay: function () {
bgAudioMannager.play()
},
audioPause:function(){
bgAudioMannager.pause()
}
})