Vue 实现电脑语音播报

前言

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

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

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

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

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

具体实现

1.Web Speech API

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

<template>
    <el-button type="success" @click="playVoice">Web Speech API</el-button>
</template>
​
<script>
const synth = window.speechSynthesis // 启用文本
const msg = new SpeechSynthesisUtterance()
export default {
  data() {
    return {
    }
  },
  methods: {
    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) // 取消该次语音播放
    }
  }
}
</script>

​

2.百度的tts服务

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

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>

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 = '<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

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

npm下包

npm install speak-tts

使用

<template>
    <el-button type="success" @click="speakTtsSpeech">speak-tts语音播报</el-button>
</template>
​
<script>
import Speech from 'speak-tts'
export default {
  data() {
    return {
      speech: null,
    }
  },
   mounted() {
     this.speechInit()
   },
​
  methods: {
    speechInit() {
      this.speech = new Speech()
      this.speech.setLanguage('zh-CN')
      this.speech.init().then(() => {})
    },
    speakTtsSpeech() {
      let msg = '你好，我叫风过无痕.'
      this.speech.speak({ text: msg }).then(() => {
        console.log('播报成功')
      })
    },
</script>

---

总结：

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

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