前端实现语音播报（Vue2）

语音播报，一般有两种情况:

第一种是后端返回mp3播放url，
第二种就是前端自己拼接的，

以下是实现方法：

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

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

      // BASE_URL，是基地址，AudioUrl 接口地址
      let audioUrl = OPERATION_BASE_URL + "/" + AudioUrl;
      let mp3 = new Audio(audioUrl);
      mp3.play();
      let timeer = undefined;
      mp3.oncanplay = () => {
        timeer = mp3.duration;
      };

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

实现语音播报要有两个原生API

分别是【window.speechSynthesis】【SpeechSynthesisUtterance】

// 执行函数
let voices, timerVoices
// 注意：在某些浏览器，window.speechSynthesis.getVoices();获取的数据是空数组。所以放到计时器中
timerVoices = setInterval(() => {
    voices = window.speechSynthesis.getVoices()
    if (voices.length) {
        clearInterval(timerVoices)
        console.info("加载浏览器语音包成功")
        // 执行函数
        initVoice({
          text: '钱来来',
          vol: 1,
          rate: 1
        })
    }
}, 17)
 
// 函数
function initVoice(config) {
  window.speechSynthesis.cancel();//播报前建议调用取消的函数，如有正在播报的话音，播报会任务被塞进入队列，只有等上一个语音结束才会执行下一个语音
  //获取语音包
  let listArr = window.speechSynthesis.getVoices();
  listArr = listArr.filter(item => item.lang.indexOf('zh-') > -1);
  if (listArr.length == 0) {
    console.error('没有可用的中文语音!');
  }
  //实例化播报内容
  let instance = new SpeechSynthesisUtterance();
  instance.text = config.text || '轻轻敲醒沉睡的心灵，慢慢张开你的眼睛，看看忙碌的世界，是否依然孤独的转个不停！'; // 文字内容
  instance.lang = config.lang || "zh-CN"; // 使用的语言:中文
  instance.volume = config.vol || 1; // 声音音量：1
  instance.rate = config.rate || 1; // 语速：1
  instance.pitch = 1; // 音高：1
  window.speechSynthesis.speak(instance); // 播放
  instance.addEventListener("end", () => {});// 监听播报完成状态，播完可以做些其它处理    
}

结语：以上就是实现语音播报的二种方法，大家结合自己的情况使用！！！