JavaScript純前端實(shí)現(xiàn)語音播報(bào)和朗讀功能
實(shí)現(xiàn)語音播報(bào)要有兩個(gè)原生API
分別是【window.speechSynthesis】【SpeechSynthesisUtterance】
項(xiàng)目代碼
// 執(zhí)行函數(shù)
initVoice({
text: '項(xiàng)目介紹',
vol: 1,
rate: 1
})
// 函數(shù)
export function initVoice(config) {
window.speechSynthesis.cancel();//播報(bào)前建議調(diào)用取消的函數(shù),如有正在播報(bào)的話音,播報(bào)會(huì)任務(wù)被塞進(jìn)入隊(duì)列,只有等上一個(gè)語音結(jié)束才會(huì)執(zhí)行下一個(gè)語音
//獲取語音包
let listArr = window.speechSynthesis.getVoices();
listArr = listArr.filter(item => item.lang.indexOf('zh-') > -1);
if (listArr.length == 0) {
console.error('沒有可用的中文語音!');
}
//實(shí)例化播報(bào)內(nèi)容
let instance = new SpeechSynthesisUtterance();
instance.text = config.text || '輕輕敲醒沉睡的心靈,慢慢張開你的眼睛,看看忙碌的世界,是否依然孤獨(dú)的轉(zhuǎn)個(gè)不停!'; // 文字內(nèi)容
instance.lang = config.lang || "zh-CN"; // 使用的語言:中文
instance.volume = config.vol || 1; // 聲音音量:1
instance.rate = config.rate || 1; // 語速:1
instance.pitch = 1; // 音高:1
window.speechSynthesis.speak(instance); // 播放
instance.addEventListener("end", () => {});// 監(jiān)聽播報(bào)完成狀態(tài),播完可以做些其它處理
}將函數(shù)拷貝到項(xiàng)目中,執(zhí)行函數(shù)即可實(shí)現(xiàn)。
下面列出一些常用的執(zhí)行方法
//獲取可用的語音包,如果返回?cái)?shù)組是空,則沒有可用的語音包。不同瀏覽器的語音包數(shù)量是不一樣的。 window.speechSynthesis.getVoices(); //instance是SpeechSynthesisUtterance的實(shí)例,綁定了語音包。將話語添加到話語隊(duì)列中;當(dāng)任何其他話語在它被說出之前排隊(duì)時(shí),它將被說出。 window.speechSynthesis.speak(instance); // 取消語音 window.speechSynthesis.cancel(); //暫停語音 // window.speechSynthesis.pause(); //恢復(fù)語音 window.SpeechSynthesis.resume();

注意:在某些瀏覽器,必須先提前調(diào)用【window.speechSynthesis.getVoices();】方法,再異步執(zhí)行上面【完整語音播報(bào)】再能播報(bào)語音。
原因是第一次【window.speechSynthesis.getVoices();】獲取的數(shù)據(jù)是空數(shù)組。
第二次異步調(diào)用【window.speechSynthesis.getVoices();】才返回非空數(shù)組。

到此這篇關(guān)于JavaScript純前端實(shí)現(xiàn)語音播報(bào)和朗讀功能的文章就介紹到這了,更多相關(guān)JavaScript語音播報(bào)朗讀內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript 最常用的10個(gè)自定義函數(shù)[推薦]
如果不使用類庫或者沒有自己的類庫,儲(chǔ)備一些常用函數(shù)總是有好處的。2009-12-12
JavaScript監(jiān)聽觸摸事件代碼實(shí)例
這篇文章主要介紹了JavaScript監(jiān)聽觸摸事件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
微信小程序用canvas實(shí)現(xiàn)圓形進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了微信小程序用canvas實(shí)現(xiàn)圓形進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06
javascript 事件對(duì)象 坐標(biāo)事件說明
javascript 事件對(duì)象 坐標(biāo)事件說明,學(xué)習(xí)js坐標(biāo)事件的朋友可以參考下。2010-05-05
layer.open 按鈕的點(diǎn)擊事件關(guān)閉方法
今天小編就為大家分享一篇layer.open 按鈕的點(diǎn)擊事件關(guān)閉方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript對(duì)IE操作的經(jīng)典代碼(推薦)
本篇文章主要是對(duì)JavaScript對(duì)IE操作的經(jīng)典代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-03-03

