HTML 5 语音合成

目录

• 一、前言
• 二、SpeechSynthesis
• 三、SpeecheSynthesisUtterance
• 四、示例

一、前言

前一段时间在项目中需要用到播报文字语音。找到了 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')