vue3 下载wav音频文件

Vue 3 的代码与 Vue 2 的代码略有不同。你可以使用以下代码在 Vue 3 中下载 WAV 音频文件：

<template>
  <div>
    <audio :src="audioUrl" controls></audio>
    <button @click="downloadAudio">下载音频文件</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const audioUrl = ref('http://example.com/sample.wav');
    const audioBlob = ref(null);

    const downloadAudio = () => {
      // 创建一个 <a> 元素
      const link = document.createElement('a');
      
      // 将 Blob 对象赋值给它
      link.href = URL.createObjectURL(audioBlob.value);
      
      // 设置 <a> 元素的属性
      link.download = 'sample.wav';
      
      // 模拟点击 <a> 元素，触发下载
      link.click();
    };

    const getAudioBlob = async (url) => {
      // 发送 GET 请求，获取录音文件的二进制数据
      const response = await fetch(url);
      const blob = await response.blob();
      
      // 将录音文件的二进制数据保存到 data 中
      audioBlob.value = blob;
      
      // 将 Blob 对象转换为 URL 对象，用于播放录音文件
      audioUrl.value = URL.createObjectURL(blob);
    };

    // 在 mounted 生命周期钩子中调用 getAudioBlob 方法
    onMounted(() => {
      getAudioBlob('http://example.com/sample.wav');
    });

    return {
      audioUrl,
      audioBlob,
      downloadAudio
    };
  }
};
</script>

在上述代码中，我们使用 Vue 3 的 `ref` 函数创建了两个响应式数据 `audioUrl` 和 `audioBlob`，用于保存音频文件的 URL 对象和 Blob 对象。然后，我们定义了两个方法 `downloadAudio` 和 `getAudioBlob`，用于下载音频文件和获取音频文件的二进制数据。

在 HTML 模板中，我们使用 `<audio>` 元素播放录音文件，使用 `<button>` 元素触发下载操作。在 `downloadAudio` 方法中，我们创建一个 `<a>` 元素，并将 `audioBlob` 赋值给它。然后，我们设置 `download` 属性为指定的文件名，并模拟点击 `<a>` 元素，触发下载操作。在 `getAudioBlob` 方法中，我们使用 `fetch` 函数发送 GET 请求，获取录音文件的二进制数据，并将其保存到 `audioBlob` 中。最后，我们将 `audioBlob` 转换为 URL 对象，用于播放录音文件。