<template>
  <div>
    <!-- 輸入要朗讀的文字 -->
    <textarea v-model="text" rows="3"></textarea>
    
    <!-- 控制按鈕 -->
    <button @click="speak" :disabled="isSpeaking">朗讀</button>
    <button @click="pause" :disabled="!isSpeaking">暫停</button>
    <button @click="resume" :disabled="isSpeaking">繼續(xù)</button>
    <button @click="stop">停止</button>

    <!-- 語(yǔ)音選擇（可選） -->
    <select v-model="selectedVoice" v-if="voicesLoaded">
      <option v-for="voice in voices" :key="voice.name" :value="voice">
        {{ voice.name }} ({{ voice.lang }})
      </option>
    </select>

    <!-- 參數(shù)調(diào)節(jié)（可選） -->
    <div>
      語(yǔ)速: <input type="range" v-model="rate" min="0.5" max="2" step="0.1">
      音調(diào): <input type="range" v-model="pitch" min="0" max="2" step="0.1">
      音量: <input type="range" v-model="volume" min="0" max="1" step="0.1">
    </div>

    <!-- 兼容性提示 -->
    <div v-if="!isSupported" class="error">
      當(dāng)前瀏覽器不支持文字朗讀功能，請(qǐng)使用 Chrome/Firefox/Edge 最新版
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "歡迎使用文字朗讀功能",   // 朗讀文本
      isSpeaking: false,           // 朗讀狀態(tài)
      synth: null,                 // SpeechSynthesis 實(shí)例
      utterance: null,             // 當(dāng)前朗讀實(shí)例
      voices: [],                  // 可用語(yǔ)音列表
      voicesLoaded: false,         // 語(yǔ)音是否加載完成
      selectedVoice: null,         // 選擇的語(yǔ)音
      rate: 1,                     // 語(yǔ)速 (0.1-10)
      pitch: 1,                    // 音調(diào) (0-2)
      volume: 1                    // 音量 (0-1)
    };
  },
  computed: {
    // 檢查瀏覽器支持情況
    isSupported() {
      return 'speechSynthesis' in window;
    }
  },
  mounted() {
    if (this.isSupported) {
      this.synth = window.speechSynthesis;
      
      // 加載可用語(yǔ)音列表（需要時(shí)間初始化）
      this.synth.onvoiceschanged = () => {
        this.voices = this.synth.getVoices();
        this.voicesLoaded = true;
        this.selectedVoice = this.voices.find(v => v.default) || this.voices[0];
      };
    }
  },
  methods: {
    // 創(chuàng)建新的朗讀實(shí)例
    createUtterance() {
      const utterance = new SpeechSynthesisUtterance(this.text);
      utterance.voice = this.selectedVoice;
      utterance.rate = this.rate;
      utterance.pitch = this.pitch;
      utterance.volume = this.volume;

      // 監(jiān)聽(tīng)狀態(tài)變化
      utterance.onstart = () => this.isSpeaking = true;
      utterance.onend = utterance.onerror = () => {
        this.isSpeaking = false;
        this.utterance = null;
      };
      return utterance;
    },

    // 開(kāi)始朗讀
    speak() {
      if (!this.text) return;
      this.stop(); // 停止當(dāng)前朗讀
      this.utterance = this.createUtterance();
      this.synth.speak(this.utterance);
    },

    // 暫停
    pause() {
      this.synth.pause();
    },

    // 繼續(xù)
    resume() {
      this.synth.resume();
    },

    // 停止
    stop() {
      this.synth.cancel();
      this.isSpeaking = false;
    }
  },
  beforeDestroy() {
    this.stop();
  }
};
</script>

<style>
.error {
  color: red;
  margin-top: 10px;
}
</style>

// 示例：調(diào)用阿里云TTS API
async function cloudTTS(text) {
  const response = await fetch('https://tts-api.aliyun.com/synthesize', {
    method: 'POST',
    body: JSON.stringify({ text, voice: 'xiaoyun' })
  });
  const audioBlob = await response.blob();
  const url = URL.createObjectURL(audioBlob);
  new Audio(url).play();
}

npm install vue-speech

import VueSpeech from 'vue-speech';
Vue.use(VueSpeech);

// 組件中使用
<vue-speech v-model="text" :voices="voices" />