在某客戶客服對話專案中開發語音功能，本來一切功能都挺正常的，測驗發現在ios上錄制語音會很容易卡頓，android卻不會，此時專案趕著要上線，為了這個問題可謂是絞盡腦汁，百度+問人跟公司同事共同找了幾天原因，最終在藏著可深的一篇博客里找到完全符合場景的情況，（見文末）
使用情形如下：(wav格式)
在ios，開始幾次錄音和播放都正常，后面開始的每一段語音，開頭會明顯卡頓疊音，后面部分都趨于正常，長按錄音時我插入了一個仿微信錄音影片，我發現錄音的影片也卡了，按理如果是我錄音卡，是不會影響其他css影片的，后面發現居然是整個瀏覽器都卡了，
因此我分析了幾個可能導致的原因：
- 影片是通過定時器實作的，錄音倒計時也有定時器，使用眾多的定時器是不是導致卡頓的原因？
- 是不是使用的插件有問題，ios不兼容？
- 是不是錄音資源沒有釋放，new的Record物件沒有close和destory的原因？
- 是不是適合安卓的音頻位元率16k和采樣率16000不適合ios？
- 是不是運行到哪里報錯了？（PC的瀏覽器終究不是手機，而ios又不太支持查看瀏覽器控制臺）
- 是不是ios不支持wav格式的音頻？
等等原因，，，，
結果，，，都不對
嘗試操作：
- 注釋掉語音功能所有不影響正常使用功能的定時器，發現依舊會卡頓
- 更換了另一款錄音插件，還是會卡頓，使用插件的demo在ios上不會卡頓，那就不是插件的問題了，
- 更換了new的位置，避免重復new，添加了destory的方法，沒用
- 采用率位元率調整，音質調炸了，而且，對接百度的翻譯語音功能是要求16k,16000的 所以也不能改
- 使用try{ }catch(e){ } 把整個語音功能模塊套起來 也沒有走catch的陳述句，且借了同事的一臺mac運行 也沒有發現報錯，
- 目前大部分版本都支持wav了
- 到插件的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/
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/294509.html
標籤：其他