vue實現(xiàn)文字轉(zhuǎn)語音功能詳解
更新時間：2022年09月06日 08:50:26 作者：不扔媳婦的干將莫邪
這篇文章主要介紹了vue實現(xiàn)文字轉(zhuǎn)語音功能詳解的相關(guān)資料,需要的朋友可以參考下
目前h5新增一個文字轉(zhuǎn)語音的功能(但是正在完善中,勉強能用),h5新增的SpeechSynthesisUtterance實例
首先new一個SpeechSynthesisUtterance對象
使用實例對象的一些屬性，包括：
text – 要合成的文字內(nèi)容，字符串。lang – 使用的語言，字符串， 例如："zh-cn"voiceURI – 指定希望使用的聲音和服務(wù)，字符串。volume – 聲音的音量，區(qū)間范圍是0到1，默認(rèn)是1。rate – 語速，數(shù)值，默認(rèn)值是1，范圍是0.1到10，表示語速的倍數(shù)，例如2表示正常語速的兩倍。pitch – 表示說話的音高，數(shù)值，范圍從0（最小）到2（最大）。默認(rèn)值為1。
方法
speak() 將對應(yīng)的實例添加到語音隊列中cancel() 刪除隊列中所有的語音.如果正在播放,則直接停止pause() 暫停語音resume() 恢復(fù)暫停的語音getVoices 獲取支持的語言數(shù)組. 注意:必須添加在voiceschanged事件中才能生效
但是這個方法不支持老版的ie,需要加瀏覽器判斷方法
isIe(){
? ? if(!!window.ActiveXObject || "ActiveXObject " in window){
? ? ? ? return true
? ? }else{
? ? ? ? return false
? ? }
},然后根據(jù)ie使用方法
? ?voice(e){
? ? window.speechSynthesis.cancel()
? ? ? let timer
? ? ? timer = setInterval(() => {
? ? ? ? let msg = e
? ? ? ? if(this.isIe()){
? ? ? ? ? ? let voiceObj = new ActiveXObject("Sapi.SpVoice")
? ? ? ? ? ? voiceObj.Rate = -1 // 語速
? ? ? ? ? ? voiceObj.Volume = 50 // 音量
? ? ? ? ? ? voiceObj.Speak(msg,1)
? ? ? ? }else{
? ? ? ? ? ? let speakMsg = new?
? ? ? ? ? ? ? ?SpeechSynthesisUtterance(msg)
? ? ? ? ? ? speakMsg.rate = 1 // 語速
? ? ? ? ? ? speakMsg.pitch = 3 // 音量
? ? ? ? ? ? window.speechSynthesis.speak(speakMsg)
? ? ? ? }
? ? ?}, 1000)
? ? ?setTimeout(() => {
? ? ? ? // 一段時間后清除定時器
? ? ? ? clearInterval(timer)
? ? ?}, 1000)
? ? },到此這篇關(guān)于vue實現(xiàn)文字轉(zhuǎn)語音功能詳解的文章就介紹到這了,更多相關(guān)vue語音播報內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了用Vue封裝導(dǎo)航欄組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
關(guān)于vue-lunar-full-calendar的使用說明
這篇文章主要介紹了關(guān)于vue-lunar-full-calendar的使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue 固定頭 固定列 點擊表頭可排序的表格組件的相關(guān)資料,需要的朋友可以參考下2016-11-11
vue3+springboot部署到Windows服務(wù)器的詳細(xì)步驟
這篇文章主要介紹了vue3+springboot部署到Windows服務(wù)器,配置Nginx時，因為現(xiàn)在是把vue前端交給了Nginx代理，所以這里的端口號不一定是我們在vue項目中設(shè)置的端口號，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-10-10
這篇文章主要給大家介紹了關(guān)于vue-cli配置使用Vuex的相關(guān)資料,Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,本介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vuepress打包之后頁面樣式丟失問題的兩種解決方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue中的@blur/@focus事件解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
最近遇到這樣的問題在app中使用uni-forms表單,并添加校驗規(guī)則,問題是即使輸入內(nèi)容,表單校驗依然失敗,本文給大家分享uni-app中vue3表單校驗失敗的問題及解決方法,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue如何自定義組件v-model問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue左側(cè)菜單,樹形圖遞歸實現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08