目標

使用合成語音來按照畫面文字播放語音

Demo | Github

處理步驟

步驟 1.

設定合成語音 API 物件，並取得畫面文字為語音內容

1	msg.text = document.querySelector('[name="text"]').value;

步驟 2.

合成語音的下拉選單填充，並設定選單變更事件

先填充選單內容

// 填充下拉選單
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("");
}

選單變更事件

// 設定語音
function setVoice() {
  msg.voice = voices.find(voice => voice.name === this.value);
}

speechSynthesis.addEventListener("voiceschanged", populateVoices);

// 語音下拉選單變更
voicesDropdown.addEventListener("change", setVoice);

步驟 3.

設定播放速度、文字與聲道

// 設定播放速度、文字、聲道
function setOption() {
  console.log(this.name, this.value);
  msg[this.name] = this.value;
}

步驟 4.

設定播放與停止按鍵功能

// 播放與停止
function toggle(startOver = true) {
  speechSynthesis.cancel();
  if (startOver) {
    speechSynthesis.speak(msg);
  }
}
// 播放
speakButton.addEventListener("click", toggle);

// 停止播放
stopButton.addEventListener("click", () => toggle(false));

筆記與備註事項

JavaScript 部分

SpeechSynthesisUtterance

The SpeechSynthesisUtterance interface of the Web Speech API represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)
資料來源 - MDN

Web Speech API 中的 SpeechSynthesis 語音合成服務

SpeechSynthesis

The SpeechSynthesis interface of the Web Speech API is the controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.
資料來源 - MDN

語音 API 的服務介面；以下是此次範例使用的屬性說明

pitch 聲道
text 播放內容文字
rate 說話速度

ShunNien's Blog

JS30紀錄 23-Speech Synthesis

目標