vue下载wav录音文件
时间: 2023-09-04 07:08:27 浏览: 46
你可以使用以下代码在 Vue 中下载 WAV 录音文件:
```vue
<template>
<div>
<audio :src="audioUrl" controls></audio>
<button @click="downloadAudio">下载录音文件</button>
</div>
</template>
<script>
export default {
data() {
return {
audioUrl: 'http://example.com/sample.wav',
audioBlob: null
}
},
methods: {
downloadAudio() {
// 创建一个 <a> 元素
const link = document.createElement('a');
// 将 Blob 对象赋值给它
link.href = URL.createObjectURL(this.audioBlob);
// 设置 <a> 元素的属性
link.download = 'sample.wav';
// 模拟点击 <a> 元素,触发下载
link.click();
},
async getAudioBlob(url) {
// 发送 GET 请求,获取录音文件的二进制数据
const response = await fetch(url);
const blob = await response.blob();
// 将录音文件的二进制数据保存到 data 中
this.audioBlob = blob;
// 将 Blob 对象转换为 URL 对象,用于播放录音文件
this.audioUrl = URL.createObjectURL(blob);
}
},
mounted() {
this.getAudioBlob('http://example.com/sample.wav');
}
};
</script>
```
在上述代码中,我们首先在 Vue 中定义了一个数据属性 `audioBlob`,用于保存录音文件的 Blob 对象。然后,我们定义了一个 `getAudioBlob` 方法,用于发送 GET 请求,获取录音文件的二进制数据,并将其保存到 `audioBlob` 中。接着,我们将 `audioBlob` 转换为 URL 对象,用于播放录音文件。最后,我们定义了一个 `downloadAudio` 方法,用于将 `audioBlob` 下载到本地。
在 HTML 模板中,我们使用 `<audio>` 元素播放录音文件,使用 `<button>` 元素触发下载操作。在 `downloadAudio` 方法中,我们创建一个 `<a>` 元素,并将 `audioBlob` 赋值给它。然后,我们设置 `download` 属性为指定的文件名,并模拟点击 `<a>` 元素,触发下载操作。