一、前言

前一段時間在專案中需要用到播報文字語音。找到了 HTML 5 有這樣的功能。

現在有時間進行總結下。

二、SpeechSynthesis

SpeechSynthesis 介面是語音服務的控制介面。它可以用於獲取裝置上關於可用的合成聲音的資訊，

開始、暫停語音，或者別的命令。（MDN）

SpeechSynthesis 是 window 上面的屬性，可以直接呼叫。

屬性：

下面的都是隻讀屬性

paused：是否處於暫停狀態，返回 Boolean 值

pending：語音播報佇列中是否有需要說的語音，返回 Boolean 值

speaking：是否正在進行語音播報（包括暫停狀態），返回 Boolean 值

事件：

onvoiceschanged：當 getVoices 返回的 voices 列表改變時觸發

方法：

cancel：移除所有語音播報佇列中的語音

getVoices：返回當前裝置可用的聲音列表

pause：暫停語音播報

resume：把物件設定為非暫停狀態，如果是暫停就繼續

speak：新增一個 utterance 到語音播報佇列，會在其他語音播報後播報

三、SpeecheSynthesisUtterance

SpeecheSynthesisUtterance 是語音請求的一個類。需要例項化才可以使用。

它包含語音要閱讀的內容以及如何閱讀（例如語言、音調、音量等）

屬性：

lang：讀取或設定當前要閱讀的語音

pitch：讀取或設定閱讀的音調

rate：讀取或設定閱讀的語速

text：讀取或設定閱讀的內容

voice：讀取或設定閱讀的聲音（不同的瀏覽器有不同內建的人聲）

volume：讀取或設定閱讀的音量

事件：

boundary：當閱讀到單詞或句子的邊界時觸發

end：當閱讀結束時觸發

error：當閱讀報錯時觸發

mark：當閱讀到 SSML 標記時觸發

pause：當閱讀暫停時觸發

resume：當閱讀設定為非暫停時觸發

start：開始閱讀時觸發

上面的事件都是用 addEventListenter 繫結事件，同時也可以用對應的 onEventname 繫結事件

四、示例

上面兩個 API 可以滿足基本的語音播報需要了，下面就是一個示例

function Speak(str,lang)
{
  let msg = new SpeechSynthesisUtterance(str)
  // 語言
  msg.lang = lang
  // 音量
  msg.volume = 1
  // 語速
  msg.rate = 1
  // 音調
  msg.pitch = 1
  let voices = window.speechSynthesis.getVoices();
  console.log(voices.length)
  for(i = 0; i < voices.length ; i++) {
    console.log(voices[i])
  }
  // 聲音
  mag.voice = voices[voices.length-1]
  window.speechSynthesis.cancel()
  window.speechSynthesis.speak(msg)
}

Speak('這是一個示例','zh-CN')