三、vue项目案例

<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>

一、技术：Web Speech API
Web Speech API​​ 使您能够将语音数据合并到 Web 应用程序中。

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

二、语音合成及发音接口
​ ​SpeechSynthesis​​：语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其它相关命令的信息。

​ ​SpeechSynthesisUtterance​​：表示一次发音请求。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。