vue 实现语音播报

vue 实现语音播报

语音播放10次

<script>
let synth; 
let msgSetting;
export default {
  data() {
    return {
      numstateAll : 10, // 播放10次
      numsynthAll : 0, // 记录播放次数
    };
  },
  mounted() {
    synth = window.speechSynthesis; // 该对象是使用Web Speech API语音合成功能的入口点
    msgSetting = new SpeechSynthesisUtterance(); // 创建文本实例
     let that = this; 
     this.handleSpeak("机器人出现了故障，请检查机器人"); // 传入需要播放的文字
     // 监听 语音播放完成
     msgSetting.onend = function (event) {
       console.log("语音播报完成");
       that.numsynthAll++;
       if (that.numsynthAll < that.numstateAll) {
         console.log("继续播放");
         that.handleSpeak("机器人出现了故障，请检查机器人");
       } else {
         console.log("结束播放");
         that.handleStop();
         that.numsynthAll = 0;
         return;
       }
     };
  },
  methods: {
    // 开始播放
    handleSpeak(text) {
      msgSetting.text = text; // 文字内容
      msgSetting.lang = "zh-CN"; // 使用的语言:中文
      msgSetting.volume = 6; // 音量：1
      msgSetting.rate = 1; // 语速：1
      msgSetting.pitch = 3; // 音高：1
      synth.speak(msgSetting); // 播放
    },
    // 停止播放
    handleStop(e) {
      synth.cancel(msgSetting);
    }
  },
};
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

完成！复制代码直接用！