vue實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音功能詳解
目前h5新增一個(gè)文字轉(zhuǎn)語(yǔ)音的功能(但是正在完善中,勉強(qiáng)能用),h5新增的SpeechSynthesisUtterance實(shí)例
首先new一個(gè)SpeechSynthesisUtterance對(duì)象
使用實(shí)例對(duì)象的一些屬性，包括：
text – 要合成的文字內(nèi)容，字符串。lang – 使用的語(yǔ)言，字符串， 例如："zh-cn"voiceURI – 指定希望使用的聲音和服務(wù)，字符串。volume – 聲音的音量，區(qū)間范圍是0到1，默認(rèn)是1。rate – 語(yǔ)速，數(shù)值，默認(rèn)值是1，范圍是0.1到10，表示語(yǔ)速的倍數(shù)，例如2表示正常語(yǔ)速的兩倍。pitch – 表示說(shuō)話的音高，數(shù)值，范圍從0（最?。┑?（最大）。默認(rèn)值為1。
方法
speak() 將對(duì)應(yīng)的實(shí)例添加到語(yǔ)音隊(duì)列中cancel() 刪除隊(duì)列中所有的語(yǔ)音.如果正在播放,則直接停止pause() 暫停語(yǔ)音resume() 恢復(fù)暫停的語(yǔ)音getVoices 獲取支持的語(yǔ)言數(shù)組. 注意:必須添加在voiceschanged事件中才能生效
但是這個(gè)方法不支持老版的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 // 語(yǔ)速
? ? ? ? ? ? voiceObj.Volume = 50 // 音量
? ? ? ? ? ? voiceObj.Speak(msg,1)
? ? ? ? }else{
? ? ? ? ? ? let speakMsg = new?
? ? ? ? ? ? ? ?SpeechSynthesisUtterance(msg)
? ? ? ? ? ? speakMsg.rate = 1 // 語(yǔ)速
? ? ? ? ? ? speakMsg.pitch = 3 // 音量
? ? ? ? ? ? window.speechSynthesis.speak(speakMsg)
? ? ? ? }
? ? ?}, 1000)
? ? ?setTimeout(() => {
? ? ? ? // 一段時(shí)間后清除定時(shí)器
? ? ? ? clearInterval(timer)
? ? ?}, 1000)
? ? },到此這篇關(guān)于vue實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音功能詳解的文章就介紹到這了,更多相關(guān)vue語(yǔ)音播報(bào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié)
這篇文章主要介紹了在vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
今天小編就為大家分享一篇在vue中使用vuex,修改state的值示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue打包后dist文件在本地啟動(dòng)運(yùn)行的步驟
這篇文章主要給大家介紹了關(guān)于vue打包后dist文件在本地啟動(dòng)運(yùn)行的簡(jiǎn)單步驟,文中通過(guò)代碼示例以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue-router路由該如何使用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Vue.js 是一款流行的前端框架,它提供了一些方便的機(jī)制來(lái)管理組件之間的通信,其中包括組件傳值,本文將詳細(xì)介紹 Vue.js 中的組件傳值機(jī)制,包括父子組件傳值、兄弟組件傳值、跨級(jí)組件傳值等多種方式,需要的朋友可以參考下2023-08-08
el-table-column 內(nèi)容不自動(dòng)換行的解決方法
本文主要介紹了el-table-column 內(nèi)容不自動(dòng)換行的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了Nuxt.js實(shí)戰(zhàn)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue如何監(jiān)聽(tīng)頁(yè)面的滾動(dòng)的開(kāi)始和結(jié)束
這篇文章主要介紹了vue如何監(jiān)聽(tīng)頁(yè)面的滾動(dòng)的開(kāi)始和結(jié)束，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue不通過(guò)路由直接獲取url中參數(shù)的方法示例
通過(guò)url傳遞參數(shù)是我們?cè)陂_(kāi)發(fā)中經(jīng)常用到的一種傳參方法，但通過(guò)url傳遞后改如果獲取呢？下面這篇文章主要給大家介紹了關(guān)于vue如何不通過(guò)路由直接獲取url中參數(shù)的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-08-08