首页 > 其他分享> > vue实现文字转语音播报

vue实现文字转语音播报

2022-09-09 15:31:56 作者：互联网

一、前言

最近项目里需要对特定内容进行语音播报，于是乎我就咨询了一番度娘，得到几种实现的方案，让我们来一一对比吧。本文更多是在用法上进行描述，每种方案的使用的技术，则没有深入叙述。

二、对比选择

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