iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
1
Modern Web

實作經典 JavaScript 30系列 第 27

Day27:Speech Synthesis

WES BOS系列影片
Alex快速導讀系列影片

今天來認識 Web Speech API中的兩個功能
一個是 SpeechSynthesisUtterance
它包含語音服務應閱讀的內容
以及有關如何閱讀的信息(例如語言,音調和音量)。

另一個是 Speech Synthesis
語音業務的控制器接口;
它可用於檢索有關設備上可用的合成語音,
開始和暫停語音以及其他命令的信息。

呼叫的語法:

const msg = new SpeechSynthesisUtterance();

將msg console 出來發現有很多屬性可以使用
待會都會陸續使用到

屬性 解釋
SpeechSynthesisUtterance.lang 獲取並設置話語的語言。
SpeechSynthesisUtterance.pitch 獲取並設置說話時的音調。(值越大越尖锐,越小越低沉)
SpeechSynthesisUtterance.rate 獲取並設置發聲的速度。(值越大語速越快,越小越慢)
SpeechSynthesisUtterance.text 獲取並設置在說出語音時將要合成的文本。
SpeechSynthesisUtterance.voice 獲取並設置將用於說出語音的聲音。
SpeechSynthesisUtterance.volume 獲取並設置說話的音量。

開始動手作

1.對SpeechSynthesis監聽'voiceschanged'事件
並使用getVoices()方法,列出語言清單

function populateVoices () {
 console.log(this.getVoices())
}
 
speechSynthesis.addEventListener('voiceschanged', populateVoices)

2.撰寫populateVoices函式
使用getVoices()得到能使用的語系清單
並透過filter過濾語系,只留下('en')語系
最後用map做出渲染下拉式選單的HTML

function populateVoices () {
 voices = this.getVoices()
 voicesDropdown.innerHTML = voices
  .filter(voice => voice.lang.includes('en'))
  .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
  .join('');
}

3.對voicesDropdown監聽'change'事件

voicesDropdown.addEventListener('change', setVoice)

4.依照下拉式選單的選擇,設置語音合成器的語系

function setVoice() {   
  msg.voice = voices.find(voice => voice.name === this.value);
}

5.製作speak與stop按鈕功能,先設置監聽器

  speakButton.addEventListener('click', toggle);
  stopButton.addEventListener('click', () => toggle(false));

6.撰寫toggle函式
每一次speak前都要先取消,之後再speak

function toggle(startOver = true) {
    speechSynthesis.cancel();
    if (startOver) {
      speechSynthesis.speak(msg);
    }
}

7.設定rate與picth,先設置監聽器

options.forEach(option => option.addEventListener('change', setOption));

8.撰寫setOption函式
設置後走toggle函式,讓語音合成器說話

function setOption() {
  console.log(this.name, this.value);
  msg[this.name] = this.value;
  toggle();
}

今天的練習完成囉,完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30


上一篇
Day26: Follow Along Links
下一篇
Day28: Sticky Nav
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言