17.记录Vue项目实现文字语音播报功能

SpeechSynthesisUtterance属性介绍：

SpeechSynthesisUtterance.lang：设置话语的语言。 例如：“zh-cn”表示中文

SpeechSynthesisUtterance.pitch：设置说话的音调(音高)。范围从0（最小）到2（最大）。默认值为1

SpeechSynthesisUtterance.rate：设置说话的速度。默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍

SpeechSynthesisUtterance.text：设置在说话时将合成的文本内容。

SpeechSynthesisUtterance.voice：设置用于说话的声音。

SpeechSynthesisUtterance.volume：设置将在其中发言的音量。区间范围是0到1，默认是1

<template>
    <button @click="playVoice">播放语音</button>
</template>
<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
  data() {
      text: "您有新的订单"
  },
 methods: {
    playVoice() {
      this.handleSpeak(this.text) // 传入需要播放的文字
    }
    // 语音播报的函数
    handleSpeak(text) {
      msg.text = text;     // 文字内容: 小朋友，你是否有很多问号
      msg.lang = "zh-CN";  // 使用的语言:中文 
      msg.volume = 0.5;      // 声音音量：1  设置将在其中发言的音量。区间范围是0到1，默认是1
      msg.rate = 1;        // 语速：1  设置说话的速度。默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍
      msg.pitch = 1.5;       // 音高：2  设置说话的音调(音高)。范围从0（最小）到2（最大）。默认值为1
      synth.speak(msg);    // 播放
    },
    // 语音停止
    handleStop(e) {
      msg.text = e;
      msg.lang = "zh-CN";
      synth.cancel(msg);
    },
  }