抖音小程序音频播放问题

638 阅读2分钟

场景:进入页面有常驻的背景音乐播放,特定操作时,会播放对应操作的声音,且背景音乐不中断。 接手时情况:IOS和安卓均无法自动播放背景音乐,默认进入后无音乐,需要用户手动开启。

初始方案:
IOS端使用 uni.createInnerAudioContext
Android端使用 uni.createVideoContext

查看抖音api文档 uni.createInnerAudioContext,通过添加loop和autoplay属性,实现IOS自动播放功能。随后在文档中看到obeyMuteSwitch属性(是否遵循系统静音开关),能够使音乐不受系统音量影响进行播放。

最终实现效果如图:
image.png

修复完IOS的播放问题,接下来就是Android了。
Android使用的是uni.createVideoContext,调整前跟同事沟通确认,Android无法进行自动播放,所以在创建实例后,才默认不让播放。

然后就开始了我的踩坑之旅
踩坑一
进入页面后能够自动播放背景音乐,但是只有短短一瞬,随后就没有声音了,加上了onPlay监听,发现是被莫名其妙暂停,然后就给抖音提了个工单反馈这个问题,对方让提供个最小复现demo,在实现demo时,发现demo是能够自动播放的,随后就去排查了下代码,将一些不相干的代码去除排查问题,最终定位到问题,是由于同时使用标签和api构建的实例导致。 image.png 踩坑二
解决完踩坑一后,发现在触发特定操作时,能够播放对应操作的声音,但是发现背景音乐莫名其妙没有声音了,原有的onPlay监听打印还未删除,看到音频被暂停了,随后给其他的音频都加上了onPlay监听,发现每当有一个音频播放时,其他的音频都会被暂停。 image.png 此时一脸懵逼,重新看了下uni.createInnerAudioContext文档,才发现在文档末尾,有个Bug & Tip,直接裂开。 image.png

抱着一丝希望,又提了个工单,对方也是让我去看那个文档,并没有相关解决方案-_-||。 image.png 随后去看了其他的播放api,tt.getBackgroundAudioManager,发现无法播放,不过多纠结,直接查找其他的方案。

因为项目是通过uni-app搭建的,所以也去uni-app社区查找了下 ask.dcloud.net.cn/question/13…
ask.dcloud.net.cn/question/11…

在这两个文档里头找到了相关的问答,设置sessionCategory ,不过真机实测发现其实不生效 image.png

最终解决方案
抽空去洗了把脸,突然想到,之前同事使用的uni.createVideoContext 只是安卓进入时无法自动播放,所以重新去翻看了文档,看到也有autoplay属性,但是之前设置好像没有生效?!

所以在标签上给它设置默认,发现是可以直接播放,且其他音频播放也不会终止背景音乐播放 image.png

最终版本: image.png image.png

总算解决了并上线,心累┓(;´_`)┏