為什么80%的碼農都做不了架構師？>>> ??

在vue項目中引入語音播報，使用的科大訊飛語音接入，

具體思路為每次接收到語音信息后存入一個數組，然后監聽這個數組，開始沖第一個索引播放，并且同時根據vuex getter?來動態刪減數量

給audio綁定ended事件來執行播放完成后播放下一個

播放結束后，根據ended事件來確認如果數組內數量為0，則移除該事件并置狀態為無播放狀態，當數組開始變化時，重新開始執行此播放行為

?

這里遇到個小問題，當要播放的信息異常時，比如數組內移除了該索引的數據，但是仍然播放到這個時，就會報錯

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

解決辦法：

判斷視頻的networkState，如果值等于3，則不播放，跳過

- Media.networkState; //0.此元素未初始化 1.正常但沒有使用網絡 2.正在下載數據 3.沒有找到資源

?

相關代碼如下

?

watch: {audio_list: {handler: function(val, old) {if (val.length !== 0 && !this.is_calling) {var self = thisthis.is_calling = truevar myAudio = this.$refs.audiomyAudio.preload = true// myAudio.controls = truemyAudio.src = val[0] //每次讀數組第一個setTimeout(() => self.setAudio(), 100)myAudio.addEventListener('ended', playEndedHandler, false)myAudio.play()myAudio.loop = false //禁止循環，否則無法觸發ended事件function playEndedHandler() {myAudio.src = val[0] //每次讀數組第一個setTimeout(() => self.setAudio(), 100)myAudio.networkState !== 3 && myAudio.play()if (val.length === 0) {console.log('讀完了')myAudio.removeEventListener('ended', playEndedHandler, false)self.is_calling = false}}}},deep: true}},

?

這個使用的時base64編碼后的信息，

還試過百度的語音，由前端直接請求，返回的是blob對象數據。在demo測試時可以正常使用，但是引入項目中后，會一直報錯

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

百度沒有找到解決方案，并且感覺百度的語音沒有訊飛的聽著舒服，就沒有用這個，

我后來試了下，好像是由于在demo中返回的數據是blob對象，但是引入vue里后就變成了string類型的了，URL.createObjectURL?無法作用，如果再轉為blob對象，賦值給audio也沒反應了，沒有查到原因，記錄下

轉載于:https://my.oschina.net/mdu/blog/1927919

總結

以上是生活随笔為你收集整理的vue内引入语音播报功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。