語音合成API

Speech Synthesis API是一個很棒的API,非常適合嘗試新型界面並讓瀏覽器與您對話

語音合成API是現代瀏覽器提供的強大工具。

2014年推出,現在被廣泛採用並在Chrome,Firefox,Safari和Edge中可用。不支持IE。

Browser support for the Speech Synthesis API

它是Web Speech API的一部分,語音識別API,雖然目前僅在Chrome上以實驗模式支持。

我最近使用它在監視某些參數的頁面上提供了警報。當其中一個數字上升時,我就被計算機揚聲器嚇到了。

入門

使用語音合成API停留在一條線上:

speechSynthesis.speak(new SpeechSynthesisUtterance('Hey'))

將其複制並粘貼到您的瀏覽器控制台中,您的計算機便會說話!

API

該API將多個對象公開給window目的。

SpeechSynthesisUtterance

SpeechSynthesisUtterance代表語音請求。在上面的示例中,我們為它傳遞了一個字符串。那是瀏覽器應大聲朗讀的消息。

獲得語音對像後,您可以進行一些調整以編輯語音屬性:

const utterance = new SpeechSynthesisUtterance('Hey')
  • utterance.rate:設置速度,可接受[0.1-10],默認為1
  • utterance.pitch:設置音高,接受[0-2],默認為1
  • utterance.volume:設置音量,接受[0-1],默認為1
  • utterance.lang:設置語言(值使用BCP 47語言標記,例如en-US或者it-IT
  • utterance.text:您可以將其作為屬性傳遞,而不是在構造函數中進行設置。文字最多32767個字符
  • utterance.voice:設置聲音(有關此內容,請參見下文)

例子:

const utterance = new SpeechSynthesisUtterance('Hey')
utterance.pitch = 1.5
utterance.volume = 0.5
utterance.rate = 8
speechSynthesis.speak(utterance)

設定聲音

瀏覽器具有不同數量的可用聲音。

要查看列表,請使用以下代碼:

console.log(`Voices #: ${speechSynthesis.getVoices().length}`)

speechSynthesis.getVoices().forEach(voice => { console.log(voice.name, voice.lang) })

Voices in Firefox

這是跨瀏覽器問題之一。上面的代碼在Firefox,Safari(可能還有Edge,但我沒有對其進行測試)中都可以使用,但是在Chrome中不起作用。 Chrome需要以不同的方式處理語音,並且需要在加載語音後調用回調:

const voiceschanged = () => {
  console.log(`Voices #: ${speechSynthesis.getVoices().length}`)
  speechSynthesis.getVoices().forEach(voice => {
    console.log(voice.name, voice.lang)
  })
}
speechSynthesis.onvoiceschanged = voiceschanged

調用回調後,我們可以使用speechSynthesis.getVoices()

我認為這是因為Chrome(如果存在網絡連接)會檢查Google服務器中的其他語言:

Chrome Languages

如果沒有網絡連接,則可用的語言數量與Firefox和Safari相同。在啟用了網絡的情況下,還可以使用其他語言,但是API也可以脫機工作。

跨瀏覽器實現以獲取語言

由於存在這種差異,因此我們需要一種將其抽象化以使用API的方法。這個例子做了這個抽象:

const getVoices = () => {
  return new Promise(resolve => {
    let voices = speechSynthesis.getVoices()
    if (voices.length) {
      resolve(voices)
      return
    }
    speechSynthesis.onvoiceschanged = () => {
      voices = speechSynthesis.getVoices()
      resolve(voices)
    }
  })
}

const printVoicesList = async () => { ;(await getVoices()).forEach(voice => { console.log(voice.name, voice.lang) }) }

printVoicesList()

見小故障

使用自定義語言

默認聲音是英語。

您可以通過設置話語來使用所需的任何語言lang財產:

let utterance = new SpeechSynthesisUtterance('Ciao')
utterance.lang = 'it-IT'
speechSynthesis.speak(utterance)

使用其他聲音

如果有一個以上的聲音可用,則可能要選擇另一個聲音。例如,默認的意大利語聲音是女性,但也許我想要男性聲音。這是我們從聲音列表中獲得的第二個聲音。

const lang = 'it-IT'
const voiceIndex = 1

const speak = async text => { if (!speechSynthesis) { return } const message = new SpeechSynthesisUtterance(text) message.voice = await chooseVoice() speechSynthesis.speak(message) }

const getVoices = () => { return new Promise(resolve => { let voices = speechSynthesis.getVoices() if (voices.length) { resolve(voices) return } speechSynthesis.onvoiceschanged = () => { voices = speechSynthesis.getVoices() resolve(voices) } }) }

const chooseVoice = async () => { const voices = (await getVoices()).filter(voice => voice.lang == lang)

return new Promise(resolve => { resolve(voices[voiceIndex]) }) }

speak(‘Ciao’)

見小故障

語言的價值

這些是您可以使用的語言的一些示例:

  • 阿拉伯語(沙特阿拉伯)➡️ar-SA
  • 中文(中國)➡️zh-CN
  • 中文(中國香港特別行政區)➡️zh-HK
  • 中文(台灣)➡️zh-TW
  • 捷克(捷克共和國)➡️cs-CZ
  • 丹麥文(丹麥)➡️da-DK
  • 荷蘭語(比利時)➡️nl-BE
  • 荷蘭語(荷蘭)➡️nl-NL
  • 英語(澳大利亞)➡️en-AU
  • 英語(愛爾蘭)➡️en-IE
  • 英語(南非)➡️en-ZA
  • 英文(英國)➡️en-GB
  • 英文(美國)➡️en-US
  • 芬蘭文(芬蘭)➡️fi-FI
  • 法語(加拿大)➡️fr-CA
  • 法語(法國)➡️fr-FR
  • 德語(德國)➡️de-DE
  • 希臘文(希臘)➡️el-GR
  • 印地語(印度)➡️hi-IN
  • 匈牙利文(匈牙利)➡️hu-HU
  • 印尼文(印度尼西亞)➡️id-ID
  • 意大利語(意大利)➡️it-IT
  • 日語(日本)➡️ja-JP
  • 韓文(南韓)➡️ko-KR
  • 挪威文(挪威)➡️no-NO
  • 波蘭文(波蘭)➡️pl-PL
  • 葡萄牙語(巴西)➡️pt-BR
  • 葡萄牙語(葡萄牙)➡️pt-PT
  • 羅馬尼亞語(羅馬尼亞)➡️ro-RO
  • 俄語(俄羅斯)➡️ru-RU
  • 斯洛伐克(斯洛伐克)➡️sk-SK
  • 西班牙語(墨西哥)➡️es-MX
  • 西班牙文(西班牙)➡️es-ES
  • 瑞典語(瑞典)➡️sv-SE
  • 泰國(泰國)➡️th-TH
  • 土耳其語(土耳其)➡️tr-TR

移動的

在iOS上,該API可以運行,但必須由用戶操作回調(例如對輕擊事件的響應)觸發,以為用戶提供更好的體驗並避免手機發出意外聲音。

您無法在台式機上喜歡,在台式機上,您的網頁可以使您的文字突如其來。

免費下載我的JavaScript初學者手冊


更多瀏覽器教程: