在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也没反应了，没有查到原因，记录下