SpeechSynthesisUtterance 語音合成

參考鏈接：https://blog.csdn.net/qq_40571631/article/details/89738575

---

SpeechSynthesisUtterance基本介紹

SpeechSynthesisUtterance是HTML5中新增的API,用於將指定文字合成為對應的語音

SpeechSynthesisUtterance基本屬性

SpeechSynthesisUtterance.lang 獲取並設置話語的語言
SpeechSynthesisUtterance.pitch 獲取並設置話語的音調(值越大越尖銳,越低越低沉)
SpeechSynthesisUtterance.rate 獲取並設置說話的速度(值越大語速越快,越小語速越慢)
SpeechSynthesisUtterance.text 獲取並設置說話時的文本
SpeechSynthesisUtterance.voice 獲取並設置說話的聲音
SpeechSynthesisUtterance.volume 獲取並設置說話的音量

SpeechSynthesisUtterance監聽事件

onstart 開始合成

onend 合成結束

onerror 合成錯誤

onpause 暫停

onresume 恢復暫停

onboundary 在句子或單詞邊界

speechSynthesis基本方法

speak() 將對應的實例添加到語音隊列中

cancel() 刪除隊列中所有的語音.如果正在播放,則直接停止

pause() 暫停語音

resume() 恢復暫停的語音

getVoices 獲取支持的語言數組. 注意:必須添加在voiceschanged事件中才能生效

 

 

使用：

const speak = (word) => {
  let msg = new window.SpeechSynthesisUtterance(word);
  // msg.text = word; //播放文案
  msg.volume = '1'; // 聲音的音量，區間范圍是0到1，默認是1。
  msg.rate = 1;// 設置播放語速，范圍：0.1 - 10之間    正常為1倍播放
  msg.pitch = '0'; // 表示說話的音高，數值，范圍從0（最小）到2（最大）。默認值為1。
  msg.lang = 'zh-cn'; // 使用的語言，字符串， 例如："zh-cn"
  msg.voiceURI = 'Google 普通話（中國大陸）';

  msg.onend = (event) => {  //語音合成結束時候的回調（語音讀完后觸發）
    console.log('合成結束');
  }
  msg.onstart = (event) => {
    console.log('合成開始');
  }
  msg.onerror = (event) => {
    console.log('onerror');
  }
  msg.onpause = (event) => {
    console.log('暫停');
  }
  msg.onresume = (event) => {
    console.log('恢復');
  }
  msg.onboundary = (event) => {
    console.log('在單詞或句子邊界');
  }
  window.speechSynthesis.speak(msg);
  return window.speechSynthesis;
}
let instance = null;
ele.addEventListener('click', () => {
  instance = speak('123456789')
})
pause.addEventListener('click', () => {
  instance.pause()
})
resume.addEventListener('click', () => {
  instance.resume()
})
cancel.addEventListener('click', () => {
  instance.cancel()
})

 

---