请用vue 写一个有配音api的页面

很抱歉，作为一个AI语言模型，我无法提供编程环境和API。不过，你可以尝试使用Vue.js框架与一些音频API（如Web Speech API）来创建一个有语音配音功能的页面。以下是一个示例Vue组件的代码：

<template>
  <div>
    <textarea v-model="text"></textarea>
    <button @click="speak">Speak</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
    };
  },
  methods: {
    speak() {
      const synth = window.speechSynthesis;
      const utterance = new SpeechSynthesisUtterance(this.text);
      synth.speak(utterance);
    },
  },
};
</script>

这个组件包含一个文本框用于输入文本，一个按钮用于触发语音播放。当按钮被点击时，`speak()`方法使用 `window.speechSynthesis` 和 `SpeechSynthesisUtterance` API 来创建一个语音合成实例，并使用 `speak()` 方法播放该实例。你可以将这个组件与其他Vue组件结合使用，以创建一个完整的有语音配音功能的页面。