<textarea v-model="textToSpeak" placeholder="输入要朗读的文本"></textarea>
<div>
  <label for="voice">选择一个语音:</label>
  <el-select v-model="selectedVoice" @change="changeVoice">
    <el-option v-for="voice in translatedVoices" :key="voice.name" :label="voice.label" :value="voice.name">
    </el-option>
  </el-select>
</div>
<button @click="speakText">播放</button>
<div>
  <label>语速:</label>
  <input type="range" min="1" max="10" step="1" v-model="rate" @change="updateUtterance">
  <span>{{ rate }}</span>
</div>

<div>
  <label>音高:</label>
  <input type="range" min="1" max="10" step="1" v-model="pitch" @change="updateUtterance">
  <span>{{ pitch }}</span>
</div>

<div>
  <button @click="pauseText">暂停</button>
  <button @click="resumeText">继续</button>
  <button @click="stopText">停止</button>
</div>
textToSpeak: '',
voices: [],
selectedVoice: null,
translatedVoices: [],
rate: 1, // 语速
volume: 1, // 音量
pitch: 1, // 音高
utterance: null,
voiceTranslations: {
"Microsoft Huihui - Chinese (Simplified, PRC)": "慧慧-中文",
"Microsoft Kangkang - Chinese (Simplified, PRC)": "康康-中文",
"Microsoft Yaoyao - Chinese (Simplified, PRC)": "瑶瑶-中文",
"Google Deutsch": "德语",
"Google US English": "美国英语",
"Google UK English Female": "英国英语（女）",
"Google UK English Male": "英国英语（男）",
"Google español": "西班牙语（西班牙）",
"Google español de Estados Unidos": "西班牙语（美国）",
"Google français": "法语",
"Google हिन्दी": "印地语",
"Google Bahasa Indonesia": "印度尼西亚语",
"Google italiano": "意大利语",
"Google 日本語": "日语",
"Google 한국의": "韩语",
"Google Nederlands": "荷兰语",
"Google polski": "波兰语",
"Google português do Brasil": "葡萄牙语（巴西）",
"Google русский": "俄语",
"Google 普通话（中国大陆）": "普通话（中国大陆）",
"Google 粤語（香港）": "粤语（香港）",
"Google 國語（臺灣）": "国语（台湾）",
},

changeVoice() {
this.$forceUpdate()
},
updateVoices() {
setTimeout(() => {
const availableVoices = window.speechSynthesis.getVoices();
console.log(availableVoices, 'availableVoicesavailableVoices');
this.voices = availableVoices;

    // 翻译语音列表
    this.translatedVoices = availableVoices.map(voice => ({
      name: voice.name,
      label: this.getVoiceLabel(voice)
    }));

    if (this.voices.length > 0) {
      this.selectedVoice = this.voices[0].name;
    }
  }, 5000);

},
getVoiceLabel(voice) {
  // 使用 voiceTranslations 对象进行翻译
  return this.voiceTranslations[voice.name] || voice.name;
},
speakText() {
  if (!this.textToSpeak) {
    alert('请输入要播放的文本');
    return;
  }

  this.utterance = new SpeechSynthesisUtterance(this.textToSpeak);
  this.utterance.rate = this.rate;
  this.utterance.volume = this.volume;
  this.utterance.pitch = this.pitch;
  // 找到与 selectedVoice 匹配的语音对象
  const selectedVoice = this.voices.find(v => v.name === this.selectedVoice);

  if (selectedVoice) {
    this.utterance.voice = selectedVoice;
    window.speechSynthesis.speak(this.utterance);
  } else {
    alert('选择的语音无效');
  }
},
pauseText() {
  if (window.speechSynthesis.speaking) {
    window.speechSynthesis.pause();
  }
},
resumeText() {
  if (window.speechSynthesis.paused) {
    window.speechSynthesis.resume();
  }
},
stopText() {
  window.speechSynthesis.cancel();
},
updateUtterance() {
  console.log(this.utterance, window.speechSynthesis.speaking);
  if (this.utterance && window.speechSynthesis.speaking) {
    console.log('123123');
    // 更新当前 utterance 的属性
    this.utterance.rate = this.rate;
    this.utterance.volume = this.volume;
    this.utterance.pitch = this.pitch;

    // 停止当前播放并立即重新开始，模拟实时更新效果
    window.speechSynthesis.cancel();
    window.speechSynthesis.speak(this.utterance);
  }
},