vue內引入語音播報功能

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

在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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/538034.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/538034.shtml
英文地址,請注明出處:http://en.pswp.cn/news/538034.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

php mysql 排序規則_php 數組排序以及按照某個字段排序

如果你已經使用了一段時間PHP的話,那么,你應該已經對它的數組比較熟悉了——這種數據結構允許你在單個變量中存儲多個值,并且可以把它們作為一個集合進行操作。經常,開發人員發現在PHP中使用這種數據結構對值或者數組元素進行排序…

單例問題與線程安全

餓漢式 沒有線程安全性問題 懶漢式 public class SingletonDemo2 {private static SingletonDemo2 instance;private SingletonDemo2() {}public static SingletonDemo2 getInstance() {if(instancenull) {instancenew SingletonDemo2();}return instance;}}如果遇到多線程。上…

python 音速_中國大學MOOC的APP(慕課)2021用Python玩轉數據章節答案

在高技術戰爭件下,信息的獲取相當于人的感覺器官,信息的傳輸相當于人的神經網絡,信息的處理相當于人的大腦,( )則將它們聯系為一個整體,構成了作戰的神經系統。車身可拆卸的連接有螺紋連接、卡口鏈接、鉸鏈連接。在高技術戰爭件下,信息的獲取相當于人的感覺器官,信息的傳輸相當…

Mysql中的觸發器

原文地址:https://www.cnblogs.com/zyshi/p/6618839.html ---------------------------------------------------------什么是觸發器 簡單的說,就是一張表發生了某件事(插入、刪除、更新操作),然后自動觸發了預先編寫好…

一張圖理解JS的原型(prototype、_proto_、constructor的三角關系)

注意:前方高能預警,請認真仔細看完,閱讀完后自己再次畫下原型圖,相信你一定會有更深刻的認識。(推薦炒雞好用的畫流程圖的軟件ProcessOn)構造函數:function Foo ( ) { };實例對象:let f1new Foo;let o1new …

Oracle觸發器和MySQL觸發器之間的區別

原文鏈接:http://blog.csdn.net/a19881029/article/details/37820363 -----------------------------------------------------------Oracle觸發器格式:[plain] view plaincopyCREATE [OR REPLACE] TRIGGER trigger_name BEFORE|AFTER INSERT|UPDA…

下列選項中不符合python語言變量命名規則的是_學習Python第二日--基本概念和類型...

編程語言分類:解釋型語言和編譯型語言。解釋型語言不會產生額外的文件,運行時一行一行的翻譯。編譯型語言需要產生一個額外的文件,是電腦能夠識別的內容,運行后將產生額外的文件。 變量是可變的量,是它的值可以發生改變。變量的作用是保存值,保存的值可以是數據,而且保存…

HashMap死鎖原因及替代方案

原文鏈接:http://blog.csdn.net/fhzaitian/article/details/51505516 ------------------------------------------------------------------------1、首先我們需要簡單地了解一下HashMap數據結構 HashMap通常會用一個指針數組(假設為table[]&#xff09…

優化mysql數據庫_MySQL數據庫十大優化技巧

WEB開發者不光要解決程序的效率問題,對數據庫的快速訪問和相應也是一個大問題。希望本文能對大家掌握MySQL優化技巧有所幫助。1. 優化你的MySQL查詢緩存在MySQL服務器上進行查詢,可以啟用高速查詢緩存。讓數據庫引擎在后臺悄悄的處理是提高性能的最有效方…

跋山涉水——深入 Redis 字典遍歷

Redis 字典的遍歷過程邏輯比較復雜,互聯網上對這一塊的分析講解非常少。我也花了不少時間對源碼的細節進行了整理,將我個人對字典遍歷邏輯的理解呈現給各位讀者。也許讀者們對字典的遍歷過程有比我更好的理解,還請不吝指教。一邊遍歷一邊修改…

linux下VI模式中上下左右鍵和回退鍵出現字母

原文地址:http://blog.csdn.net/u012860950/article/details/50127779 ---------------------------------------------------------------- 1.編輯/etc/vim/vimrc.tiny 由于/etc/vim/vimrc.tiny的擁有者是root用戶,所以要在root的權限下對這個文件進行修…

mysql數據庫查詢優化建議_mysql數據庫查詢優化的24條建議

MySQL是一個強大的開源數據庫。隨著MySQL上的應用越來越多,MySQL逐漸遇到了瓶頸。這里提供一些關于Mysql 數據庫查詢優化的24條優化建議,僅供參考。Mysql 查詢優化1、使用慢查詢日志,找出執行慢的查詢。2、使用 EXPLAIN 來決定查詢功能是否合…

常規sql讀取CLOB

plsql下,普通sqlsql-cmd下總結: 常規的sql,查詢clob字段,只能顯示部分內容。 查clob內容select dbms_lob.substr(c_content) from table_content t dbms_lob.substr將大文本轉換字符類型讀出來.dbms_lob.substr的轉換對字段conten…

精解 ES6箭頭函數

🐱 個人主頁:SHOW科技,公眾號:SHOW科技 🙋?♂? 作者簡介:2020參加工作,專注于前端各領域技術,共同學習共同進步,一起加油呀! 💫優質專欄&#x…

硬盤主引導記錄詳解

說明:硬盤主引導記錄獨立于操作系統,但又和操作系統息息相關——很多時候它又是由; 操作系統所提供的工具所生成(例外的情況是您使用了其他的分區工具,不過它又運行在; 什么操作系統中呢?;()。;; 如果您安裝…

Oracle char varchar varchar2 nvarchar2 的區別

上面字符類型能保存多少個字符與oracle當前的字符集有關系。 select userenv(language) from dual; 假設長度2000字節, 如果字符集是16位編碼的,ZHS16GBK,那么每個字符16位,2字節,所以可以容納1000字符。 如果是32位編…

樹莓派lnmp安裝mysql_在樹莓派上安裝 LNMP

樹莓派支持安裝非常多的操作系統,如官方所展示:這里我選擇了推薦的 Raspbian 系統,它基于 Debian,這就意味著我可以按照 Debian 的方式來安裝軟件。一、安裝 Nginx0、先將系統更新到最新狀態$ sudo apt-get update && sud…

openlayers5之熱力圖heatmap

版權聲明:本文為博主原創文章,未經博主允許不得轉載。 https://blog.csdn.net/gisdoer/article/details/81745645 openlayers5之熱力圖 點擊查看文章

maven項目在打war包時出現非法字符: '\ufeff' 解決方案

http://blog.csdn.net/qi_fei/article/details/61416319 --------------------------------------------問題描述: 開發工具MyEclipse 的總體開發環境,編碼格式總體設置為UTF-8,在將web項目打包的時候出現:非法字符:\u…

0027-生成圓

題目 生成圓難度級別:A; 運行時間限制:1000ms; 運行空間限制:51200KB; 代碼長度限制:2000000B 試題描述給你一些特殊的圓,每個這樣的圓每秒可以產生一個普通的圓,如果給你…