H5 audio标签录音播放在ios上特别卡，android正常的情况

Posted 2021-09-06 方沐雨

在某客户客服对话项目中开发语音功能，本来一切功能都挺正常的，测试发现在ios上录制语音会很容易卡顿，android却不会，此时项目赶着要上线，为了这个问题可谓是绞尽脑汁，百度+问人跟公司同事共同找了几天原因，最终在藏着可深的一篇博客里找到完全符合场景的情况。（见文末）

使用情形如下：(wav格式)

在ios，开始几次录音和播放都正常，后面开始的每一段语音，开头会明显卡顿叠音，后面部分都趋于正常。长按录音时我插入了一个仿微信录音动画，我发现录音的动画也卡了，按理如果是我录音卡，是不会影响其他css动画的，后面发现居然是整个浏览器都卡了。

因此我分析了几个可能导致的原因：

1. 动画是通过定时器实现的，录音倒计时也有定时器，使用众多的定时器是不是导致卡顿的原因？
2. 是不是使用的插件有问题，ios不兼容？
3. 是不是录音资源没有释放，new的Record对象没有close和destory的原因？
4. 是不是适合安卓的音频比特率16k和采样率16000不适合ios？
5. 是不是运行到哪里报错了？（PC的浏览器终究不是手机，而ios又不太支持查看浏览器控制台）
6. 是不是ios不支持wav格式的音频？

等等原因。。。。
结果。。。都不对

尝试操作：

1. 注释掉语音功能所有不影响正常使用功能的定时器，发现依旧会卡顿
2. 更换了另一款录音插件，还是会卡顿。使用插件的demo在ios上不会卡顿，那就不是插件的问题了。
3. 更换了new的位置，避免重复new，添加了destory的方法。没用
4. 采用率比特率调整，音质调炸了，而且，对接百度的翻译语音功能是要求16k,16000的 所以也不能改
5. 使用try{ }catch(e){ } 把整个语音功能模块套起来 也没有走catch的语句，且借了同事的一台mac运行 也没有发现报错。
6. 目前大部分版本都支持wav了
7. 到插件的git上看看有没有类似的问题，发现有几个类似，但是，并不符合我的场景。

一个星期已经周五了，着急像热锅上的蚂蚁，还没找到问题的原因，不知道原因，就完全没法下手。这时我主管大大（yyds）突然给我发了张图：

茅塞顿开！！！这不就是我现在的情形吗
每次发送一段语音，append到聊天界面确实创建了个audio标签，而发送多个的时候就创建了多个，demo里并没有这样。我也不是非要创建多个audio所以其实也不用导入上图的组件库，可以换种方法

解决方案：

每次录制语音把消息id和临时创建的语音url保存到一个数组里，通过创建的一个隐藏的audio标签，点击语音时遍历查找到对应的消息id，将绑定的url替换到audio的src中并play()，解决！！！
这个问题怕是这辈子都不会忘了，以此做记录

参考博客：https://blog.csdn.net/huige232508/article/details/113864603
使用的语音插件Recorder.js地址：https://xiangyuecn.gitee.io/recorder/