今天來認識 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