说完了 SpeechSyntehesisUtteranc 我们再来看看 SpeechSynthesis
SpeechSynthesis 的主要作用是对语音进行一系列的控制，比如开始或者暂停
它有三个只读属性，表明了语音的状态：
SpeechSynthesis.paused
SpeechSynthesis.pending同时还有一系列方法用来操作语音：
•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>直接通过 innerText 读取其中的文本，然后构造语音合成对象，也能按照期望顺序阅读（图片会被忽略）
当然如果我们想要忽略一些特殊的结构，比如表格，我们可以花一些精力在解析上，把我们不想要的数据或者 DOM 元素筛掉
不管怎样，我们都能找到合适的解决方案～
闲话
这个特性，是一个还在草案中的特性，没有被广泛支持
再次强调，这个 API 暂时还不能应用到生产环境中
目前比较通用的做法是在后端构造将文本合成成语音文件的 API（也许是第三方 API），然后在前端作为媒体播放
曾经在我迷茫的时候，我去阅读一些大牛的文章，读到一些前辈对前端开发的思考。其中有一点令我印象深刻：
前端是最贴近用户的，一切要从用户的的角度考虑，无障碍使用也是一个很重要的课题。虽然做这样的功能带来的收益远远小于其他业务，但是为了让产品更好的服务用户，多付出一些劳动也是值得的，这也是前端开发的一种精神
