前端实现文字转语音播放

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

前一阵遇到了一个关于语音播放的需求，大致功能是读出页面需要显示的文本内容，并且可以控制播放与暂停。下面总结一下能够实现文字转语音播放的几种方案。

1、Web Speech API

它可以使 Web 应用能够处理语音数据， Web Speech API 提供了多个 API ，可以进行语音识别以及语音合成等，可支持的接口列表如下：

具体的原理细节可参考文档：Web Speech API

实现方式

创建文本实例 msg ，用来配置语音播放相关的参数

创建语音 speech ，用于调用播放、暂停等方法

let msg = new SpeechSynthesisUtterance();
let speech = window.speechSynthesis;

参数配置
- text —— 朗读的文本内容
- pitch —— 朗读的音调，默认值：1（范围0~2，值越大越尖锐,越低越低沉）
- rate —— 朗读的速度，默认值：1（范围0.1-10，值越大语速越快,越小语速越慢）
- volume —— 朗读的音量
- lang —— 朗读的语言
```
msg.text = "长风破浪会有时，直挂云帆济沧海"
msg.pitch = 1
msg.rate = 1
msg.volume = 10
msg.lang = 'zh-CN' 
```
方法调用

播放

参数是前面定义的文本实例
```
speech.speak(msg)
```
暂停
```
speech.pause()
```
继续
```
speech.resume()
```
结束/取消
```
speech.cancel()
```

切换语言如果想要配置动态切换语言的功能，可以通过 getVoices() 方法获取，一些简单的语言需求基本都可以满足

voices = speech.getVoices()

获取到的 voices 对象如下：

2、speak-tts

安装及使用：

npm install speak-tts

import Speech from 'speak-tts'

// 使用
const speech = new Speech();
speech.setLanguage('zh-CN');
speech.init()
speech.speak({text:"长风破浪会有时，直挂云帆济沧海"}).then(()=>{
    // 朗读完成
})

可配置项：

其它操作可参考 speak-tts 文档

3、百度文字转语音 API

如果应用场景比较简单，前两种就可以满足使用。百度提供的接口使用场景更丰富一些，支持手机应用语音交互、语音内容分析、机器人对话等等，具体操作方法可参考官方文档： ai.baidu.com/ai-doc/SPEE…