在vue2中使用语音播报功能

最近在实际开发遇到如下场景，需要根据后端返回的文本来实现语音播报。

解决办法如下：👇

以下是一个示例：

1. 首先，安装speak-tts插件：

npm install speak-tts 或者 yarn add speak-tts

2. 在需要使用语音播报的组件中引入speak-tts：

import SpeakTts from 'speak-tts'

export default {
  data() {
    return {
      tts: new SpeakTts()
    }
  },
  methods: {
    speak(text) {
      this.tts.speak({
        text: text,
        queue: false,
        listeners: {
          onend: () => {
            console.log('finished speaking')
          }
        }
      })
    }
  }
}

3. 在需要进行语音播报的地方调用speak()方法即可：

this.speak('需要播报的文字') // 如果做了国际化，传入英文也能播报

以下是楼主的示例代码：👇

<script>

import SpeakTts from 'speak-tts'

export default {
  name: '',
  data() {
    return {
      tts: new SpeakTts(),
    }
  },
  mounted() {
    this.speak('please speak something')
  },
  methods: {
    speak(text) {
      this.tts.speak({
        text: text,
        queue: false,
        listeners: {
          onend: () => {
            console.log('finished speaking')
          }
        }
      })
    },
  }
}
</script>

最后附上相关资料链接：

npm

github