由于公司小程序 ‘蜗牛亲子英语’ 涉及到音频播放这一块,写的时候 遇到很多坑, 所以在这里总结一下, 希望能够为 同样在写音频播放这一块的 童鞋解解惑

自行查看 微信官方相关API

wx.playBackgroundAudio 这个API官方已经不做更新了,所以你就不用继续研究这个了,可以使用最新功能更强横的 wx.getBackgroundAudioManager()

let BackgroundAudioManager = wx.getBackgroundAudioManager()
BackgroundAudioManager.seek(playMusicTime)   //playMusicTime 是滑动到获取的时间

这种情况是说,如果你在微信后台有音乐在播放中的话, 在ios 上通过滑动滑块获取到用户滑到当前的时间 playMusicTime 赋给 BackgroundAudioManager.seek() 按照官网给的API就可以正常播放了。
但是并没有。他是从头开始播放的,那么就是说我们的 playMusicTime 并没有给进去, 所以尝试着给了一个 延迟加载。 欸 还真别说 成了

let BackgroundAudioManager = wx.getBackgroundAudioManager()
setTimeout(() => {
    BackgroundAudioManager.seek(this.playMusicTime)
    this.$apply()
}, 30)

然后我又开开心心的 拿起了安卓手机测了一下,发现安卓机又哑巴了…黑人问号脸
ok, 他既然闲30毫秒少 那就来个猛的 我赋值300毫秒,但是不要给超过1s,因为你想啊 如果我滑动的时候 一秒之后在赋值,时间计算的时候就差了一秒,后续结尾的时候处理又得多了条判断,所以没必要。

let BackgroundAudioManager = wx.getBackgroundAudioManager()
setTimeout(() => {
    BackgroundAudioManager.seek(this.playMusicTime)
    this.$apply()
}, 300)

emmmmm 这回安卓机舒服了。

下面说一下 当音频播放结束,再滑动滑块的时候出现的情况。

BackgroundAudioManager.seek(this.playMusicTime)

前面说了 只有后台音频在播放的时候 它可以播放滑动的任意时间, 但是如果播放结束, 后台没有音频播放了 那它就不起作用了。所以这里要加一个变量 用来判断在滑动的时候后台是否有音频在播放。 上代码~

let BackgroundAudioManager = wx.getBackgroundAudioManager()
setTimeout(() => {
   if (this.playing) {
	BackgroundAudioManager.seek(this.playMusicTime)
    	this.$apply()  // 小程序wepy 框架 异步赋值。不是wepy 不用考虑这条
   }
}, 300)

this.playing 就是当前组件内 用来记录 是否有音频播放的,如果自动播放到结束/滑动到结尾 将 this.playing 赋值为 false 就ok了。 然后播放音频这么写

let BackgroundAudioManager = wx.getBackgroundAudioManager()
	wx.playBackgroundAudio({
	  dataUrl: this.$parent.globalData.storeMusicUrl // wepy 全局存储音频链接变量
	})
	// 修改
	setTimeout(() => {
  		BackgroundAudioManager.seek(this.playMusicTime)
  	this.$apply()
}, 800)

OK 这时候后台就有音频了,然后下面就可以发挥作用拉。买了佛冷

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐