请使用百度的语音合成接口 接合 vue3 写一个示例

好的，以下是一个使用百度语音合成接口接合 Vue 3 的示例，您可以参考：

1. 在 `public` 目录下创建 `audio` 文件夹，用于存放合成出来的音频文件。
2. 在 `index.html` 中引入百度语音合成 API 的 JS 文件：

<!-- 引入百度语音合成API -->
<script src="https://cdn.bdstatic.com/libs/baidu-tts/2.0.0/baidu_tts.min.js"></script>

3. 在 Vue 3 组件中，通过 `BaiduTts` 对象调用百度语音合成接口：

<template>
  <div>
    <button @click="speak">点击朗读</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const text = ref('您好，欢迎使用百度语音合成接口')
    const appKey = '您的App Key'
    const secretKey = '您的Secret Key'
    const audioFolder = 'audio/'

    const speak = () => {
      const baiduTts = new BaiduTts(appKey, secretKey)
      const fileName = `${text.value}.mp3`
      const audioFilePath = `${audioFolder}${fileName}`

      baiduTts.getVoice(text.value, {spd: 5, per: 0}).then(res => {
        const blob = new Blob([res.data], {type: 'audio/mp3'})
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = fileName
        a.click()
      }).catch(err => {
        console.error(err)
      })
    }

    return {
      text,
      speak
    }
  }
}
</script>

在上述示例中，我们通过 `BaiduTts` 对象调用 `getVoice` 方法进行语音合成，其中 `appKey` 和 `secretKey` 分别是您在百度云控制台中申请的应用 ID 和密钥，`audioFolder` 是存放音频文件的文件夹路径，`spd` 和 `per` 分别是语速和发音人选项，可以根据需求进行调整。

当我们点击按钮时，会调用 `speak` 方法，该方法会将合成出来的音频文件下载到本地。您也可以将下载的音频文件播放出来，让用户听到语音输出。