vue使用WEB自带TTS实现语音文字互转

在Vue中使用Web Speech API中的TTS（Text-to-Speech）功能实现文字转语音的基本步骤如下：

1. 创建一个Vue组件。
2. 使用speechSynthesis API来读取文本。
3. 提供一个方法来触发语音合成，并设置语音参数。
4. 在模板中添加一个按钮来调用这个方法。

以下是一个简单的示例代码：

<template>
  <div>
    <textarea v-model="text" placeholder="输入或编辑文字"></textarea>
    <button @click="speak">转换为语音</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    speak() {
      const msg = new SpeechSynthesisUtterance();
      msg.text = this.text;
      msg.lang = 'zh-CN'; // 设置语言
      speechSynthesis.speak(msg);
    },
  },
};
</script>

在这个例子中，我们创建了一个文本区域和一个按钮，文本区域用于输入文本，按钮用于触发语音合成。speak方法创建了一个SpeechSynthesisUtterance实例，并设置了要读取的文本和语言。然后使用speechSynthesis.speak()方法开始语音合成。