Vue.js实现文本转语音(TTS)功能的完整代码

<template>
  <div>
    <textarea v-model="text" placeholder="输入要转换的文字"></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;
      // 创建一个新的语音请求对象
      this.utterance = new SpeechSynthesisUtterance(this.text);
      // 配置语音参数
      this.utterance.lang = 'zh-CN'; // 设置语言为中文
      this.utterance.rate = 1;       // 语速，范围 0.1 到 10
      this.utterance.pitch = 1;      // 音调，范围 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();
    // 初始化并配置语音参数
    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: '你的文本内容',
      }).then(() => {
        console.log('播放成功');
      }).catch(e => {
        console.error('播放失败', e);
      });
    },
  },
};