Vue 实现电脑语音播报

前言

• 最近项目有需求要语音播报，搜索了一下，总结了一下。

• 有3个方法把特定的文字让电脑语音播报出来，前提是电脑有蓝牙模块有声音的前提下。

• 第一种 Web Speech API h5新提供的一个原生语音识别技术的API，可以将文本转成语音播放。

• 第二种 接入百度的tts服务，个人开发者有免费额度，时效半年，兼容性较好，就是需要外网。

• 第三种 Speak-tts插件 speak-tts是基于Web Speech API封装而成，优化了长语音不流畅的问题，还改进了许多不合理的地方

具体实现

1.Web Speech API

不需要引入，直接生成，建议放在export default{}之前，成为全局变量

​

​

2.百度的tts服务

不需要额外下载插件，直接是使用audio标签，加上source返回的语音文件进行播放。

html部分

js部分 调用这个方法实现

doTTS(text) {
  var ttsDiv = document.getElementById('bdtts_div_id')
  var ttsAudio = document.getElementById('tts_autio_id')
  var ttsText = text // 要合成的文字
  // 文字转语音
  ttsDiv.removeChild(ttsAudio)
  var au1 = ''
  ttsDiv.innerHTML = au1 + sss + eee + au2
​
  ttsAudio = document.getElementById('tts_autio_id')
  // 进行播放
  ttsAudio.play()
}

3.Speak - tts

基于第一种方法 更加完善建议使用这一种

npm下包

npm install speak-tts

使用

​

---

总结：

经过这一趟流程下来相信你也对 Vue 实现电脑语音播报 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕