前端开发中基于Web Speech API（speechSynthesis接口）实现文字转语音功能

一、Web Speech 的概念及用法

在开发业务系统时，有时候可能需要使用语音播报一段文字。

目前文字转语音即语音合成技术现在已经很成熟了，像百度、讯飞等都提供了相关的服务，支持将文字转换成各种形式的语音，通常这些服务都需要付费使用，如果对语音要求不高，并且又想节约成本，那么可以直接使用浏览器的语音合成功能。

Web Speech API 使你能够将语音数据合并到 Web 应用程序中。Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。

SpeechSynthesisUtterance是HTML5中新增的API，用于将指定文字合成为对应的语音。它包含一些配置项，可以指定如何去阅读（如语言、音量、音调等）。

Web Speech API 使 Web 应用能够处理语音数据，该项 API 包含以下两个部分：

• 语音识别通过 SpeechRecognition (en-US) 接口进行访问，它提供了识别从音频输入（通常是设备默认的语音识别服务）中识别语音情景的能力。一般来说，你将使用该接口的构造函数来构造一个新的 SpeechRecognition (en-US) 对象，该对象包含了一系列有效的对象处理函数来检测识别设备麦克风中的语音输入。SpeechGrammar 接口则表示了你应用中想要识别的特定文法。文法则通过 JSpeech Grammar Format (JSGF.) 来定义。

• 语音合成通过 SpeechSynthesis 接口进行访问，它提供了文字到语音（TTS）的能力，这使得程序能够读出它们的文字内容（通常使用设备默认的语音合成器）。不同的声音类类型通过 SpeechSynthesisVoice (en-US) 对象进行表示，不同部分的文字则由 SpeechSynthesisUtterance (en-US) 对象来表示。你可以将它们传递给 SpeechSynthesis.speak() (en-US) 方法来产生语音。

二、Web Speech 的 API 接口

1、SpeechSynthesis

SpeechSynthesis是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。

属性

SpeechSynthesis.paused 只读
当SpeechSynthesis 处于暂停状态时， Boolean 值返回 true 。

SpeechSynthesis.pending 只读
当语音播放队列到目前为止保持没有说完的语音时， Boolean 值返回 true 。

SpeechSynthesis.speaking 只读
当语音谈话正在进行的时候，即使SpeechSynthesis处于暂停状态， Boolean 返回 true 。

方法

SpeechSynthesis.cancel()
取消语音播放。

SpeechSynthesis.getVoices()
返回当前设备所有可用声音的 SpeechSynthesisVoice列表。

SpeechSynthesis.pause()
把 SpeechSynthesis 暂停语音播放。

SpeechSynthesis.resume()
把 SpeechSynthesis 对象置为一个非暂停状态：如果已经暂停了则继续。

SpeechSynthesis.speak()
添加语音到播放列队，将会在其他语音播放完后自动播放。

2、SpeechSynthesisUtterance

SpeechSynthesisUtterance 表示一次发音请求，其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。

属性

lang：获取并设置话语的语言
pitch：获取并设置话语的音调（0-2，值越大越尖锐，越低越低沉）
rate：获取并设置说话的速度（0.1-10，值越大语速越快，越小语速越慢）
text：获取并设置说话时的文本
voice：获取并设置说话的声音（0-1）
volume：获取并设置说话的音量

方法

onboundary：当播放至一个词或句子结尾时触发
onend：语音播放结束时触发
onerror：语音播放错误时触发
onmark：当语音播放至 mark 标记时触发
onpause：暂停语音播放时触发
onresume：恢复语音播放时触发
onstart：开始语音播放时触发

三、Web Speech 的 用法

用法演示一

let synth = window.speechSynthesis;
let utterThis = new SpeechSynthesisUtterance('支付宝到账5元');
synth.speak(utterThis);
1
2
3

用法演示二

html

<input type="text" name="text" id="text">
<button onclick="startAudio()">播放语音button>
1
2

js

function startAudio() {
	// 检查浏览器是否支持Web Speech API  
	if ('speechSynthesis' in window) {  
	    let input = document.getElementById('text')
		// 创建一个新的SpeechSynthesisUtterance对象 
	    let msg = new SpeechSynthesisUtterance(input.value)
	    msg.volume = 5 //音量
	    msg.rate = 1 //语速
	    msg.text = input.value //文字
	    speechSynthesis.speak(msg) //播放语音
	} else {  
	    console.error('浏览器不支持Web Speech API');  
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这个示例会使用默认的语音合成引擎（如果有的话）将"输入框的内容"转换为语音。如果浏览器支持Web Speech API，你应该能够听到这句话被读出来。如果浏览器不支持Web Speech API，这个示例会在控制台输出一条错误消息。

四、扩展

除了使用Web Speech API之外，还有使用第三方文字转语音（TTS）库的方法，例如使用百度文字转语音开放API或iSpeech TTS引擎。

使用百度文字转语音开放API的方法需要调用其提供的接口，传入要转换的文字，并设置语言、语速等参数。使用iSpeech TTS引擎则需要引入相应的JavaScript库，并使用其提供的API将文字转换为语音。

此外，还可以使用浏览器自带的语音助手或插件来实现文字转语音的功能，例如Siri、Alexa等。这些工具通常需要用户进行一些设置和配置，以便能够正确地将文字转换为语音。

百度文字转语音开放API的调用示例代码如下：

var text = '你好，世界！'; // 要转换为语音的文本  
var apikey = '你的API密钥'; // 百度提供的API密钥  
  
var params = {  
    text: text,  
    apikey: apikey,  
    engine: 'paddle', // 选择语音合成引擎，支持'paddle'和'deepizone'两种引擎  
    voice: 'zh_cn', // 选择语音类型，支持'zh_cn'和'en'两种类型  
    speed: 5, // 语速，取值范围为0-10，数字越大语速越快  
    vol: 5, // 音量，取值范围为0-10，数字越大音量越大  
    per: 0 // 音色，取值范围为0-19，不同数字代表不同音色  
};  
  
var url = 'http://tts.baidu.com/text2audio?' + $.param(params); // 将参数拼接成URL  
$.get(url, function(response) { // 发送GET请求获取语音数据  
    var audio = new Audio(response); // 创建Audio对象并播放语音  
    audio.play();  
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18