vue2中，前端实现语音播报

一、播报情况说明

vue中语音播报，目前本人写的过程中，遇到了两种情况，第一种是后端直接返回一个mp3的播放url，第二种就是播报的内容需要前端自己拼接的，关于两种方法，我都说一下如何实现

1、后端直接返回mp3播放的url，

从后端拿到的url，以后，可以直接使用new Audio来创建，以下是我的代码，这样写就可以直接播报了

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

2、前端自己拼接文字信息来播报

语音播报的文字是前端自己拼接的，此时就要用另一种方法，贴上我的代码，我就自己重新开一个项目demo，

<template><div><button @click="playVoice">播放语音</button></div></template><script>const synth = window.speechSynthesis;const msg =newSpeechSynthesisUtterance();exportdefault{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>