為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

在vue項(xiàng)目中引入語音播報(bào)，使用的科大訊飛語音接入，

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

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

播放結(jié)束后，根據(jù)ended事件來確認(rèn)如果數(shù)組內(nèi)數(shù)量為0，則移除該事件并置狀態(tài)為無播放狀態(tài)，當(dāng)數(shù)組開始變化時，重新開始執(zhí)行此播放行為

?

這里遇到個小問題，當(dāng)要播放的信息異常時，比如數(shù)組內(nèi)移除了該索引的數(shù)據(jù)，但是仍然播放到這個時，就會報(bào)錯

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

解決辦法：

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

- Media.networkState; //0.此元素未初始化 1.正常但沒有使用網(wǎng)絡(luò) 2.正在下載數(shù)據(jù) 3.沒有找到資源

?

相關(guān)代碼如下

?

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] //每次讀數(shù)組第一個setTimeout(() => self.setAudio(), 100)myAudio.addEventListener('ended', playEndedHandler, false)myAudio.play()myAudio.loop = false //禁止循環(huán)，否則無法觸發(fā)ended事件function playEndedHandler() {myAudio.src = val[0] //每次讀數(shù)組第一個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對象數(shù)據(jù)。在demo測試時可以正常使用，但是引入項(xiàng)目中后，會一直報(bào)錯

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

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

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

轉(zhuǎn)載于:https://my.oschina.net/mdu/blog/1927919

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。