JavaScript文字转语音 SpeechSynthesisUtterance语音合成播放

738 阅读1分钟

SpeechSynthesisUtterance

这个特性已经很好地建立起来了,可以在许多设备和浏览器版本上运行。自2018年9月以来,它已在各种浏览器上可用。

可以在项目中实现文字语音合成或实现实时语音播报的小需求。

不说了,先混个眼熟吧,万一哪天需要呢。

在HTML5中,与语音相关的API可以分为两种:

  • 语音转文字 一种为语音识别(Speech Recognition)。
  • 文字转语音 另一种为语音合成(Speech Synthesis)。

今主要介绍文字转语音(Speech Synthesis)

SpeechSynthesisUtterance 用于创建将指定文字合成为对应的语音文本实例。 speechSynthesis 真实的语音是由speechSynthesis来创建的。

# 简单到两行代码就搞定
let utter = new SpeechSynthesisUtterance('支付宝到账一百万');
window.speechSynthesis.speak(utter);

SpeechSynthesisUtterance属性:

属性类型描述
textstring需要要读的内容
langstring使用的语言(比如:"zh-CN")
pitchnumber音高,值在0-2之间,(默认是1)
ratenumber语速的倍数,值在0.1-10之间(默认1倍)
voicestring指定希望使用的声音
volumenumber音量,值在0-1之间(默认是1)

SpeechSynthesisUtterance事件方法:

使用addEventListener()或通过将事件侦听器分配给此接口的oneventname属性来侦听这些事件。

方法描述
start当话语开始被说出时被激发。
pause当话语暂停时触发。
resume当暂停的话语恢复时激发。
end当话语说完时触发。
boundary当说出的话语到达单词或句子边界时触发。
error当出现阻止话语成功说出的错误时触发。
mark当说出的话语到达已命名的SSML“mark”标记时激发。

浏览器兼容

image.png

详细文档介绍:点击前往