一. HTML5中和Web Speech相关的API实际上有两类，一类是“语音识别(Speech Recognition)”，另外一个就是“语音合成(Speech Synthesis)”，这两个名词听上去很高大上，实际上指的分别是“语音转文字”，和“文字变语音”。我这里主要说的是后者，实现“文字转语音”。
二. 语音合成，语音转文字
语音合成的核心是SpeechSynthesisUtterance和speechSynthesis。
SpeechSynthesisUtterance用以构建一个语音合成实例,
let msg = new window.SpeechSynthesisUtterance('hello,world');SpeechSynthesisUtterance对象属性，包括：
text: 要转换的文本lang: 使用的语言,如"zh-cn"
voiceURI: 指定使用的声音
volume: 音量
rate: 语速，默认值是1，范围是0.1到10，表示语速的倍数，例如1是正常，2是正常语速的两倍
pitch: 音高
SpeechSynthesisUtterance 对象支持的回调方法，包括:
onstart: 语音合成开始时候的回调;
onpause: 语音合成暂停时候的回调;
onresume: 语音合成重新开始时候的回调;
onend: 语音合成结束时候的回调。
speechSynthesis对象，主要用来控制语音播报的各种行为控制，例如开始，暂停，停止，继续播放等：
speak():只能接收SpeechSynthesisUtterance实例作为唯一的参数，加入语音播放的队列，开始播放语音;stop():停止;
pause():暂停;
resume():继续播放。
getVoices():返回浏览器支持的语音包列表，数组
三. 来个demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语音测试</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//开始播放
$("#begin_speak").click(function () {
let content = $("#content").text();
let msg = new SpeechSynthesisUtterance(content);
window.speechSynthesis.speak(msg);
$("#pause_speak").show();
$("#cancel_speak").show();
});
//停止播放
$("#cancel_speak").click(function () {
window.speechSynthesis.cancel();
$("#pause_speak").hide();
$("#resume_speak").hide();
$(this).hide();
});
//暂停播放
$("#pause_speak").click(function () {
window.speechSynthesis.pause();
$("#resume_speak").show();
});
//继续播放
$("#resume_speak").click(function () {
window.speechSynthesis.resume();
$(this).hide();
});
});
</script>
</head>
<body>
<div>
<input type="button" id="begin_speak" value="播放">
<input type="button" id="pause_speak" style="display:none" value="暂停">
<input type="button" id="cancel_speak" style="display:none" value="停止">
<input type="button" id="resume_speak" style="display:none" value="继续播放">
</div>
<div id="content">
<p>Yii2.0是一个高效，安全，快速的PHP开发框架，内置了很多开发时常用的功能。Yii也内置了验证码功能，让我们在开发时可以直接使用，不过框架自带的验证码在生成后，无论是点击验证码还是重新请求生成验证码的URL，生成的验证码内容是没有变化的</p>
<p>yii框架生成验证码，只需在控制器里的
<span style="font-size: 16px; color:red;font-family: 宋体, SimSun; text-decoration: underline;">actions</span>
<span style="font-size: 16px; font-family: 宋体, SimSun; text-decoration: none;">方法里，添加一些配置就行了</span>
</P>
</div>
</body>
</html>页面效果如图：
如果浏览器支持的话，应该就能听到播放的声音了
我这里，是先用js获取到页面里的文本信息，然后构建播放信息。
这个语音播放的话，能运用到的场景还是很多并且很有趣的，比如语音播报新闻什么的！
