vue2中前端实现语音播报的详细过程

// 这里的OPERATION_BASE_URL，是我的项目基地址
// alarmAudioUrl是后端返回的语音url地址
    let AlarmAudioUrl = OPERATION_BASE_URL + "/" + alarmAudioUrl;
      let mp3 = new Audio(AlarmAudioUrl);
      mp3.play();
      let times = undefined;
      mp3.oncanplay = () => {
        times = mp3.duration;
      };

<template>
  <div>
    <button @click="playVoice">播放语音</button>
  </div>
</template>
<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
  data() {
    return {
      message :'小朋友，你是否有很多问号,hhhhhhhhhhhhhhhhhhhhhh'
    };
  },
  methods: {
    playVoice() {
    // message 假设message是你拼接好的文本信息
      this.handleSpeak(this.message ); // 传入需要播放的文字
    },
    // 语音播报的函数
    // 比如你从后端接收完数据，并且自己拼接好以后，就可以直接调这个方法，传入你的文本，就可以播放了
    handleSpeak(text) {
      msg.text = text; // 文字内容: 小朋友，你是否有很多问号
      msg.lang = 'zh-CN'; // 使用的语言:中文
      msg.volume = 1; // 声音音量：1
      msg.rate = 1; // 语速：1
      msg.pitch = 1; // 音高：1
      synth.speak(msg); // 播放
    },
  },
};
</script>