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

vue实现文字转语音播报

作者:互联网

一、前言

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

二、对比选择

1、Web Speech API

他是h5新提供的一个原生语音识别技术的API,可以将文本转成语音并播放。 一共分为两个部分:

第一个是SpeechSynthesis 语音合成(文本到语音 TTS),本文只用到该部分。

第二个是SpeechRecognition(异步语音识别),这跟浏览器版本挂钩。

作为官方的api,实现的效果是比较符合理想的,支持的语言种类也很丰富, 不过就是兼容性上不太友好(特别是firefox下的)

截止当前,

因为有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: 周末卷不动了

Snipaste_2022-07-19_15-30-26.jpg


作者:地霊殿__三無
链接:https://juejin.cn/post/7126534636183748644
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:播报,vue,tts,msg,语音,var,播放,speak
来源: https://www.cnblogs.com/Earth-Hall-Sanwu/p/16673005.html