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


更多浏览器教程：


在线技术百科！