<template>
  <div>
    <textarea v-model="text" placeholder="輸入要轉(zhuǎn)換的文字"></textarea>
    <button @click="speak">播放語音</button>
    <button @click="stop">停止播放</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: '',
      utterance: null,
      voices: [],
    };
  },
  mounted() {
    // 獲取可用的語音列表并篩選出中文語音
    this.voices = window.speechSynthesis.getVoices();
    const zhVoice = this.voices.find(v => v.lang.includes('zh'));
    if (zhVoice) {
      this.selectedVoice = zhVoice;
    }
  },
  methods: {
    speak() {
      if (!this.text.trim()) return;
      // 創(chuàng)建一個新的語音請求對象
      this.utterance = new SpeechSynthesisUtterance(this.text);
      // 配置語音參數(shù)
      this.utterance.lang = 'zh-CN'; // 設(shè)置語言為中文
      this.utterance.rate = 1;       // 語速，范圍 0.1 到 10
      this.utterance.pitch = 1;      // 音調(diào)，范圍 0 到 2
      this.utterance.volume = 1;     // 音量，范圍 0 到 1
      if (this.selectedVoice) {
        this.utterance.voice = this.selectedVoice;
      }
      // 播放語音
      window.speechSynthesis.speak(this.utterance);
    },
    stop() {
      // 停止播放
      window.speechSynthesis.cancel();
    },
  },
  beforeDestroy() {
    // 組件銷毀前停止播放
    window.speechSynthesis.cancel();
  },
};
</script>

// 1. 安裝：npm install speak-tts
import Speech from 'speak-tts';

export default {
  data() {
    return {
      speech: null,
    };
  },
  mounted() {
    this.speech = new Speech();
    // 初始化并配置語音參數(shù)
    this.speech.init({
      volume: 1,
      lang: 'zh-CN',
      rate: 1,
      pitch: 1,
      // 可以選擇特定的聲音，如 'Microsoft Yaoyao - Chinese (Simplified, PRC)'
      // voice: 'Microsoft Yaoyao - Chinese (Simplified, PRC)',
    }).then(() => {
      console.log('語音引擎已就緒');
    }).catch(e => {
      console.error('初始化失敗', e);
    });
  },
  methods: {
    speak() {
      this.speech.speak({
        text: '你的文本內(nèi)容',
      }).then(() => {
        console.log('播放成功');
      }).catch(e => {
        console.error('播放失敗', e);
      });
    },
  },
};