装修设计图网站排名,宣传广告设计模板,设备技术支持东莞网站建设,建设一个网站需要注意哪些要求为什么80%的码农都做不了架构师#xff1f; 在vue项目中引入语音播报#xff0c;使用的科大讯飞语音接入#xff0c; 具体思路为每次接收到语音信息后存入一个数组#xff0c;然后监听这个数组#xff0c;开始冲第一个索引播放#xff0c;并且同时根据vue… 为什么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
