一、前言
最近项目里需要对特定内容进行语音播报，于是乎我就咨询了一番度娘，得到几种实现的方案，让我们来一一对比吧。本文更多是在用法上进行描述，每种方案的使用的技术，则没有深入叙述。
二、对比选择
1、Web Speech API
他是h5新提供的一个原生语音识别技术的API，可以将文本转成语音并播放。 一共分为两个部分：
第一个是SpeechSynthesis 语音合成（文本到语音 TTS），本文只用到该部分。
第二个是SpeechRecognition（异步语音识别），这跟浏览器版本挂钩。
作为官方的api，实现的效果是比较符合理想的，支持的语言种类也很丰富， 不过就是兼容性上不太友好（特别是firefox下的）
截止当前，
- Chrome 桌面端和 Android 端自 version 33 以来均支持，但是带有前缀，所以你需要使用带有前缀的版本，比如：
webkitSpeechRecognition - Firefox 桌面端和移动端在 Gecko 44+ 中都支持，并且是没有前缀的，它可以在
about:config中把media.webspeech.recognition.enable设置为true打开。
因为有Chrome带前缀和Firefox不带前缀的区别，所以建议使用语音识别的过程时，参考下列代码：
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
复制代码建议在使用语音播报功能前，去对应浏览器网页控制台试试下面这串代码，如果浏览器有声音，那就是能够支持的。
speechSynthesis.speak(new SpeechSynthesisUtterance("Hello, this is your browser speaking."));
复制代码2、接入百度的tts服务
个人开发者有免费额度，时效期是半年。
兼容性较好，就是需要外网
3、speak-tts插件
speak-tts是基于Web Speech API封装而成，优化了长语音不流畅的问题，还改进了许多不合理的地方。
这是它的官方文档 www.npmjs.com/package/spe…
由于是基于Web Speech AP封装的，所以建议检查一下浏览器兼容性http: //caniuse.com/#feat=speech-synthesis
三、实现
1、Web Speech API
a、不需要引入，直接生成，建议放在export default {}之前，成为全局变量。
const synth = window.speechSynthesis; // 启用文本
const msg = new SpeechSynthesisUtterance(); // 表示一次发音请求。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。
复制代码b、创建播放函数，和停止函数，就可以按时机来调用啦
playVoice() {
this.handleSpeak('测试内容') // 传入需要播放的文字
},
// 语音播报的函数
handleSpeak(text) {
msg.text = text; // 文字内容: 测试内容
msg.lang = "zh-CN"; // 使用的语言:中文
msg.volume = 1; // 声音音量：1
msg.rate = 1; // 语速：1
msg.pitch = 1; // 音高：1
synth.speak(msg); // 播放
},
// 语音停止
handleStop(e) {
msg.text = e;
msg.lang = "zh-CN";
synth.cancel(msg); // 取消该次语音播放
}
复制代码2、接入百度的tts服务
不需要额外下载插件，直接是使用audio标签，加上source返回的语音文件进行播放。
a、html部分
<div id="bdtts_div_id">
<audio id="tts_autio_id" autoplay="autoplay">
<source id="tts_source_id" src="" type="audio/mpeg">
<embed id="tts_embed_id" height="0" width="0" src="">
</audio>
</div>
复制代码b、js函数部分，需要文字转语音就调用以下的doTTS函数。
doTTS(text) {
var ttsDiv = document.getElementById('bdtts_div_id')
var ttsAudio = document.getElementById('tts_autio_id')
var ttsText = text // 要合成的文字
// 文字转语音
ttsDiv.removeChild(ttsAudio)
var au1 = '<audio id="tts_autio_id" autoplay="autoplay">'
var sss = `<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&per=0&text=${ttsText}" type="audio/mpeg">`
var eee = '<embed id="tts_embed_id" height="0" width="0" src="">'
var au2 = '</audio>'
ttsDiv.innerHTML = au1 + sss + eee + au2
ttsAudio = document.getElementById('tts_autio_id')
// 进行播放
ttsAudio.play()
}
复制代码3、speak-tts
跟Web Speech API用法差不多，但是多了下载和引入的部分。
a、下载和引入
// 下载
npm install speak-tts
// 引入
import Speech from 'speak-tts'
复制代码b、使用
需要初始化语音服务，调用SpeechInit函数，随后就是在需要的时机调用，语音播放函数，并且该插件，还提供了一个promise的返回api，可以处理不同情况。
data () {
return {
speech:null
}
},
mounted(){
this.SpeechInit() // 需要初始化
},
methods:{
SpeechInit(){
this.speech = new Speech()
this.speech.setLanguage('zh-CN')
this.speech.init().then(()=>{})
},
//播放函数
play(textContent){
this.speech.speak({
text:textContent，// 播放的文本内容
listeners: {
//开始播放
onstart: () => { console.log("Start utterance")},
//判断播放是否完毕
onend: () => { console.log("End utterance")},
//恢复播放
onresume: () => { console.log("Resume utterance") },
},
}).then(()=>{console.log("读取成功")})
},
//暂停
paused() {
this.speech.pause();
},
//从暂停处继续播放
goahead() {
this.speech.resume();
},
},
//离开页面取消语音，不取消可能会造成奇妙的bug
destroyed() {
this.speech.cancel();
},
复制代码四、总结
不想额外下东西，就可以用Web Speech API，想要处理机制完善一些的推荐用speak-tts，跨平台的推荐用百度的tts服务（免费额度有限罢了）
ps: 周末卷不动了
作者：地霊殿__三無
链接：https://juejin.cn/post/7126534636183748644
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
