语音合成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初学者手册


更多浏览器教程: