Vue实现文字转语音，语音播报

思路： 利用 speak-tts 这个报进行文字转语音并且播报

1. 下载

   npm install speak-tts
   

2. 引入

   //不用再main.js中写，哪个vue文件需要语音播报就在那个文件里面写就行
   import Speech from 'speak-tts'
   

3. 使用

   //放在vue数据区
    speech:null
   
   //初始化语音播报的一些参数，这个方法要在语音播报之前执行，通常放在vue的生命周期中
     speechInit(){
        this.speech = new Speech();
        this.speech.setLanguage('zh-CN');
        this.speech.init().then(()=>{
           console.log('语音播报初始化完成')
         })
    },
    //语音播报
      speak(){
        this.speech.speak({text:"欢迎关注小编"}).then(()=>{
          console.log("播报完成")
        })
      }
   

完整代码

<template>
  <div class="about">
    <button @click="speak">语音播报</button>
  </div>
</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(()=>{
        console.log('语音播报初始化完成')
      })
   },
   
   speak(){
     this.speech.speak({text:"欢迎关注小编"}).then(()=>{
       console.log("播报完成")
     })
   }
  }
}
</script>

想了解更多可以参考官方

https://www.npmjs.com/package/speak-tts?activeTab=readme