SpeechSynthesis在vue中简单播放暂停案例

在Vue.js中，SpeechSynthesis API是一个用于文本到语音转换的技术，它允许我们创建一个简单的音频播放和暂停功能。以下是一个简化的例子，展示如何在Vue组件中使用这个API：

<template>
  <div>
    <button @click="startSpeaking">开始朗读</button>
    <button @click="pauseSpeaking">暂停朗读</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      synth: window.speechSynthesis,
      isSpeaking: false,
    };
  },
  methods: {
    startSpeaking() {
      if (!this.isSpeaking) {
        const utterance = new SpeechSynthesisUtterance('这是一个测试文本');
        this.synth.speak(utterance);
        this.isSpeaking = true;
      }
    },
    pauseSpeaking() {
      if (this.isSpeaking) {
        this.synth.pause();
        this.isSpeaking = false;
      }
    },
  },
};
</script>

在这个例子中，当用户点击“开始朗读”按钮时，会创建一个新的`SpeechSynthesisUtterance`对象，并通过`speak()`方法启动朗读。如果正在朗读，点击“暂停朗读”按钮会调用`synth.pause()`停止当前的语音合成。`isSpeaking`标志用于控制是否可以再次启动朗读。