利用Web Speech API的speechSynthesis实现前端文字转语音

一、Web Speech 的概念及用法

在业务系统开发场景中，有时需要实现文字内容的语音播报功能。

当前的文字转语音（TTS）技术已相当成熟，百度、讯飞等服务商均提供相关接口，支持生成多种语音格式。此类服务通常涉及费用，若对语音质量要求不高且希望控制成本，可直接调用浏览器内置的语音合成功能。

Web Speech API 允许在 Web 应用中集成语音数据处理能力。该 API 主要包含两个模块：SpeechSynthesis（语音合成，即文本转语音 TTS）和 SpeechRecognition（语音识别，用于异步语音识别）。

SpeechSynthesisUtterance 是 HTML5 新增的 API，用于将指定文本转换为对应的语音输出。该对象包含多项配置属性，允许开发者自定义朗读方式，包括语言、音量、音调等参数。

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

• 语音识别通过 SpeechRecognition 接口访问，它提供了从音频输入（通常来自设备默认的语音识别服务）中识别语音情景的能力。一般通过构造函数创建 SpeechRecognition 对象，该对象包含一系列处理函数，用于检测设备麦克风中的语音输入。SpeechGrammar 接口则用于定义应用中需要识别的特定文法，文法通过 JSpeech Grammar Format (JSGF) 进行定义。
• 语音合成通过 SpeechSynthesis 接口访问，它提供了文字到语音（TTS）的能力，使程序能够朗读其文本内容（通常使用设备默认的语音合成器）。不同的声音类型通过 SpeechSynthesisVoice 对象表示，具体的文本片段由 SpeechSynthesisUtterance 对象表示。将这些对象传递给 SpeechSynthesis.speak() 方法即可产生语音输出。

二、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);

用法演示二 html

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

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');  
	}
}

此示例使用默认的语音合成引擎（若存在）将“输入框的内容”转换为语音。如果浏览器支持 Web Speech API，用户应能听到语音朗读。若浏览器不支持该 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();  
});

到此这篇关于利用Web Speech API之speechSynthesis实现文字转语音功能的文章就介绍到这了,更多相关Web Speech API文字转语音内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！