快捷導(dǎo)航

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

更新時間：2024年04月16日 14:43:37 作者：寶，卡粉了

這篇文章主要為大家詳細(xì)介紹了JavaScript純前端實現(xiàn)語音播報和朗讀功能的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

實現(xiàn)語音播報要有兩個原生API

分別是【window.speechSynthesis】【SpeechSynthesisUtterance】

項目代碼

// 執(zhí)行函數(shù)
initVoice({
  text: '項目介紹',
  vol: 1,
  rate: 1
})
 
// 函數(shù)
export function initVoice(config) {
  window.speechSynthesis.cancel();//播報前建議調(diào)用取消的函數(shù)，如有正在播報的話音，播報會任務(wù)被塞進入隊列，只有等上一個語音結(jié)束才會執(zhí)行下一個語音
  //獲取語音包
  let listArr = window.speechSynthesis.getVoices();
  listArr = listArr.filter(item => item.lang.indexOf('zh-') > -1);
  if (listArr.length == 0) {
    console.error('沒有可用的中文語音!');
  }
  //實例化播報內(nèi)容
  let instance = new SpeechSynthesisUtterance();
  instance.text = config.text || '輕輕敲醒沉睡的心靈，慢慢張開你的眼睛，看看忙碌的世界，是否依然孤獨的轉(zhuǎn)個不停！'; // 文字內(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)聽播報完成狀態(tài)，播完可以做些其它處理    
}

將函數(shù)拷貝到項目中，執(zhí)行函數(shù)即可實現(xiàn)。

下面列出一些常用的執(zhí)行方法

//獲取可用的語音包，如果返回數(shù)組是空，則沒有可用的語音包。不同瀏覽器的語音包數(shù)量是不一樣的。
window.speechSynthesis.getVoices();
 
//instance是SpeechSynthesisUtterance的實例，綁定了語音包。將話語添加到話語隊列中；當(dāng)任何其他話語在它被說出之前排隊時，它將被說出。
window.speechSynthesis.speak(instance); 
 
// 取消語音
window.speechSynthesis.cancel();
 
//暫停語音
// window.speechSynthesis.pause();
 
//恢復(fù)語音
 window.SpeechSynthesis.resume();