前端实现语音播放

0、Web Speech API

Web Speech API 使您能够将语音数据合并到 Web 应用程序中。

Web Speech API 有两个部分：
SpeechSynthesis 语音合成 （文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。

0.1、语音合成

**SpeechSynthesis：**语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其它相关命令的信息。
**SpeechSynthesisUtterance：**表示一次发音请求。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。

可以参考的写的还可以

1、原生js实现

【MDN简单例子】https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis

// 复制出来放到浏览器console回车就可以用看到效果
let utterance = new SpeechSynthesisUtterance("Hello world!");
speechSynthesis.speak(utterance);

【自己总结DOM】

var msg = new SpeechSynthesisUtterance("测试");
         //msg.rate = 2 播放语速 （默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍）
         //msg.pitch = 1.2 音调高低 （范围从0（最小）到2（最大）。默认值为1）
         //msg.text = "播放文本"
         //msg.volume = 0.5 播放音量 (区间范围是0到1，默认是1)
         //msg.voice = 1 设置用于说话的声音。
         //msg.lang = "zh-CN";  // 使用的语言:中文
         window.speechSynthesis.speak(msg);

//播放
window.speechSynthesis.speak();
//暂停
window.speechSynthesis.pause();
//继续
window.speechSynthesis.resume();
//停止
window.speechSynthesis.cancel();

VUE DOM

<template>
    <button @click="playVoice">播放语音</button>
</template>
<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
  data() {
    return {};
  },
  methods: {
    playVoice() {
      this.handleSpeak('小朋友，你是否有很多问号') // 传入需要播放的文字
    },
    // 语音播报的函数
    handleSpeak(text) {
      msg.text = text;     // 文字内容: 小朋友，你是否有很多问号
      msg.lang = "zh-CN";  // 使用的语言:中文
      msg.volume = 1;      // 声音音量：1
      msg.rate = 1;        // 语速：1
      msg.pitch = 1;       // 音高：1
      synth.speak(msg);    // 播放
    },
    // 语音停止
    handleStop(e) {
      msg.text = e;
      msg.lang = "zh-CN";
      synth.cancel(msg);
    }
  }
};
</script>

兼容情况

2、借助百度

（1、百度实现将文字转音频；2、将音频通过播放器播放出来）【确定需要调用第三方服务，是存在风险的】

var mp3Url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&text=谭老师扫码成功";
var player = new Audio(mp3Url);
player.play(); //播放 mp3这个音频对象