欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript純前端實(shí)現(xiàn)語音播報(bào)和朗讀功能

 更新時(shí)間:2024年04月16日 14:43:37   作者:寶,卡粉了  
這篇文章主要為大家詳細(xì)介紹了JavaScript純前端實(shí)現(xiàn)語音播報(bào)和朗讀功能的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

實(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)文章

最新評(píng)論