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（最?。┑?（最大）。默認(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)文章
在vue項目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié)
這篇文章主要介紹了在vue項目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
今天小編就為大家分享一篇在vue中使用vuex,修改state的值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關(guān)于vue打包后dist文件在本地啟動運行的簡單步驟,文中通過代碼示例以及圖文介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue-router路由該如何使用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
Vue.js 是一款流行的前端框架,它提供了一些方便的機制來管理組件之間的通信,其中包括組件傳值,本文將詳細介紹 Vue.js 中的組件傳值機制,包括父子組件傳值、兄弟組件傳值、跨級組件傳值等多種方式,需要的朋友可以參考下2023-08-08
el-table-column 內(nèi)容不自動換行的解決方法
本文主要介紹了el-table-column 內(nèi)容不自動換行的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了Nuxt.js實戰(zhàn)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue如何監(jiān)聽頁面的滾動的開始和結(jié)束，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
通過url傳遞參數(shù)是我們在開發(fā)中經(jīng)常用到的一種傳參方法，但通過url傳遞后改如果獲取呢？下面這篇文章主要給大家介紹了關(guān)于vue如何不通過路由直接獲取url中參數(shù)的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08