你所不知道的HTML5——语音合成

前端能力的增强很大程度上依赖于 HTML5 的新 API，从这篇文章开始我也会对平时做不常用的一些 API 做一下学习总结今天的文章就从语音合成开始

为什么想到这个 API 呢？

在写报告查资料的时候在 “人人都是产品经理”http://www.woshipm.com/ 上发现了一个有趣的功能（打了丑丑的马赛克）

听一下就会发现，播放出来的声音并不是预先录制好的音频资料，而是通过文字识别后合成的语音

那么我们如何在前端实现这样的功能呢？主角登场！

⚠️注意，这个 API 尚在草案阶段，并且在写 demo 的时候浏览器提示部分 API 可能将不被支持，所以本文中提到的解决方案不要用于产品中

语音合成超简单例子

请先戴上耳机，然后将下面的代码复制到chrome控制台中体验～

let msg = new SpeechSynthesisUtterance("欢迎你阅读我的博客");
window.speechSynthesis.speak(msg);
复制代码

看，前端实现语音合成并不难

今天的主角 Speech Synthesis API

通过上面的例子我们可以猜测到上面调用的两个方法的功能

SpeechSyntehesisUtteranc 用来构造一个可以被读出的“东西”
window.speechSynthesis.speak 将构造好的“东西”读出来

当然了，语音合成不仅仅包含这两个API，but我们先从这两点入手

SpeechSyntehesisUtteranc

参考：developer.mozilla.org/en-US/docs/… SpeechSyntehesisUtteranc对象包含了语音服务要读取的内容和一些参数，比如语言，音高和音量

首先我们可以通过 SpeechSyntehesisUtteranc() 构造函数构造一个对象
SpeechSynthesisUtterance.lang 语言
SpeechSynthesisUtterance.pitch 音调
SpeechSynthesisUtterance.rate 语速
SpeechSynthesisUtterance.voice 语音
SpeechSynthesisUtterance.volume 音量

注意： 以上属性都是 可读写 的！可以把下面这段代码copy下来尝试一下，注释中会有说明

let msg = new SpeechSynthesisUtterance();
msg.text = "how are you" // 要合成的文本
msg.lang = "en-US" // 美式英语发音（默认自动选择）
msg.rate = 2  // 二倍速（默认为 1，范围 0.1～10）
msg.pitch = 2 // 高音调（数字越大越尖锐，默认为 1，范围 0～2 ）
msg.volume = 0.5 // 音量 0.5 倍（默认为1，范围 0～1）
window.speechSynthesis.speak(msg);
复制代码

同时这个对象还可以响应一系列事件，可能会用到的：

start 开始阅读
end 阅读结束
boundary 到达单词或句子边界
pause 暂停
resume 从暂停中恢复

借助这些事件我们可以完成一些简单的功能，比如英文句子的单词数量统计：

let count = 0; // 词语数量
let msg = new SpeechSynthesisUtterance();
let synth = window.speechSynthesis;
msg.addEventListener('start',()=>{
    // 开始阅读
    console.log(`文本内容： ${msg.text}`);
    console.log("start");
});
msg.addEventListener('end',()=>{
    // 阅读结束
    console.log("end");
    console.log(`文本单词（词语）数量：${count}`);
    count = 0;
});
msg.addEventListener('boundary',()=>{
    // 统计单词
    count++;
});
复制代码

经过尝试，由于中文没有用空格将每个词语分开，所以会进行自动的识别，比如 欢迎读者 会被识别为 欢迎 和 读者 两个词语

SpeechSynthesis

参考：developer.mozilla.org/en-US/docs/…

说完了 SpeechSyntehesisUtteranc 我们再来看看 SpeechSynthesis

SpeechSynthesis 的主要作用是对语音进行一系列的控制，比如开始或者暂停

它有三个只读属性，表明了语音的状态：

SpeechSynthesis.paused（boolean 是否处于暂停）
SpeechSynthesis.pending（boolean 是否处于还有未读语句）
SpeechSynthesis.speaking` （boolean 是否处于阅读中）

同时还有一系列方法用来操作语音：

SpeechSynthesis.speak() 开始读语音，同时触发 start 事件
SpeechSynthesis.pause() 暂停，同时触发 pause 事件
SpeechSynthesis.resume() 继续，同时触发 resume 事件
SpeechSynthesis.cancel() 取消阅读，同时触发 end 事件

基于这些操作方法，我们可以进一步增强我们的文字阅读器：

回到最初的起点

让我们回到最初的起点，我们可以基于上面的内容猜测一下有些网站中，文章的自动阅读是怎么实现的

如果这个网站前端采用了 MVVM 框架（以 Vue 为例），那么文章内容是也许存储在 data 中，可以用来构造我们需要的语音合成

当然，也有可能文章是通过 ajax 请求得到的，解析请求的数据，构造语音合成对象

如果文章是直接在 html 中写死的，这个时候就需要对 DOM 进行解析，经过测试，即便是下面这样的混乱的结构

<div id="test">
    <p>1</p>
    <p>2</p>
    <ul>
        <li>3</li>
        <li>4</li>
    </ul>
    <table>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="">
    9
</div>
复制代码