為什么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也沒反應了,沒有查到原因,記錄下