标签：播报 vue tts msg 语音 var 播放 speak
一、前言
最近项目里需要对特定内容进行语音播报，于是乎我就咨询了一番度娘，得到几种实现的方案，让我们来一一对比吧。本文更多是在用法上进行描述，每种方案的使用的技术，则没有深入叙述。
二、对比选择
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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
标签：播报,vue,tts,msg,语音,var,播放,speak 来源： https://www.cnblogs.com/Earth-Hall-Sanwu/p/16673005.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。