采用的 SpeechSynthesisUtterance实现语音播报功能，参考资料： ONE、TWO
实现效果图：
语法介绍
1、speechSynthesis.getVoices()
getVoices()的方法SpeechSynthesis接口返回的列表SpeechSynthesisVoice对象代表当前设备上所有可用的声音。
2、speechSynthesis.cancel()
cancel()的方法SpeechSynthesis接口从话语队列中删除所有的话语。
3、speechSynthesis.pause()
pause() 把SpeechSynthesis对象处于暂停状态。
4、SpeechSynthesis.speak()
增加了一个语音话语队列; 它将口语当其他话语排队之前一直说。
5、SpeechSynthesis.resume()
把SpeechSynthesis对象non-paused状态:简历如果它已经停了。
浏览器兼容性
代码附上：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>H5语音播报功能</title>
<style>
article {margin: 0 auto;max-width: 800px;text-align: center;}
textarea {max-width: 600px;width:100%;text-align: left;}
button{border-radius: 3px;border: 1px solid #dddddd;height: 30px;width: 80px;cursor: pointer;}
</style>
</head>
<body>
<article>
<h3 align="center">语音播报功能：</h3>
<p>
<textarea rows="15" class="_play">搜狗[1] 是搜狐公司的旗下子公司，于2004年8月3日推出，目的是增强搜狐网的搜索技能，主要经营搜狐公司的搜索业务。在搜索业务的同时，也推出搜狗输入法、搜狗高速浏览器。</textarea>
</p>
<p>
<label>选择播报语言：</label>
<select id="voiceSelect" onchange="play()"></select>
</p>
<button class="_search" onclick="play()">开始</button>
<button onclick="resume()">继续</button>
<button onclick="pause()">暂停</button>
<button onclick="cancel()">清除队列</button>
</article>
</body>
<script>
if(!('speechSynthesis' in window)) {
throw alert("对不起，您的浏览器不支持")
}
var _play = document.querySelector("._play"),
to_speak = window.speechSynthesis,
dataName, voiceSelect = document.querySelector("#voiceSelect"),
voices = [];
function play() {
cancel();
to_speak = new SpeechSynthesisUtterance(_play.value);
//to_speak.rate = 1.4;// 设置播放语速，范围：0.1 - 10之间
var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for(i = 0; i < voices.length; i ) {
if(voices[i].name === selectedOption) {
to_speak.voice = voices[i];
}
}
window.speechSynthesis.speak(to_speak);
}
//暂停
function pause() {
window.speechSynthesis.pause();
}
//继续播放
function resume() {
window.speechSynthesis.resume(); //继续
}
//清除所有语音播报创建的队列
function cancel() {
window.speechSynthesis.cancel();
}
//创建选择语言的select标签
function populateVoiceList() {
voices = speechSynthesis.getVoices();
for(i = 0; i < voices.length; i ) {
var option = document.createElement('option');
option.textContent = voices[i].name ' (' voices[i].lang ')';
if(voices[i].default) {
option.textContent = ' -- DEFAULT';
}
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
}
setTimeout(function() {
populateVoiceList();
}, 0)
</script>
</html>gitHub地址
