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)文章
webpack項(xiàng)目使用eslint建立代碼規(guī)范實(shí)現(xiàn)
這篇文章主要介紹了webpack項(xiàng)目使用eslint建立代碼規(guī)范實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05javascript的漸進(jìn)增強(qiáng)與平穩(wěn)退化淺談
2013-11-11JavaScript中數(shù)組去除重復(fù)的三種方法
本文通過三種方法給大家介紹js數(shù)組去除重復(fù)的方法,實(shí)用性非常高,感興趣的朋友一起學(xué)習(xí)吧2016-04-04用JavaScript實(shí)現(xiàn)一個(gè)代碼簡潔、邏輯不復(fù)雜的多級(jí)樹
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)一個(gè)代碼簡潔、邏輯不復(fù)雜的多級(jí)樹,需要的朋友可以參考下2014-05-05