vue音频文件下载方法代码

代码片

      // 下载音频文件
    downloadAudio(item) {
        let domain =window.location.origin;  
        let audioUrl=item.audioUrl
        axios({
            method: 'get',
            url: `${domain}/${audioUrl}`, // 必须显式指明响应类型是一个Blob对象,这样生成二进制的数据,才能通过window.URL.createObjectURL进行创建成功
            responseType: 'blob'
        }).then(res => {
            if (!res) {
                return;
            } // 将lob对象转换为域名结合式的url
            let blobUrl = window.URL.createObjectURL(res.data);
            let link = document.createElement('a');
            document.body.appendChild(link);
            link.style.display = 'none';
            link.href = blobUrl; // 设置a标签的下载属性,设置文件名及格式,后缀名最好让后端在数据格式中返回
            link.download = '下载音频文件.mp3'; // 自触发click事件
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(blobUrl);
        });

    },

提示:这里可以添加技术概要

例如:

openAI 的 GPT 大模型的发展历程。

整体架构流程

提示:这里可以添加技术整体架构

例如:
在语言模型中,编码器和解码器都是由一个个的 Transformer 组件拼接在一起形成的。

技术名词解释

提示:这里可以添加技术名词解释

例如:

  • Bert
  • GPT 初代
  • GPT-2
  • GPT-3
  • ChatGPT

技术细节

提示:这里可以添加技术细节

例如:

  • API
  • 支持模型类型

小结

提示:这里可以添加总结

例如:

提供先进的推理,复杂的指令,更多的创造力。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 的代码Vue 2 的代码略有不同。你可以使用以下代码Vue 3 中下载 WAV 音频文件: ```vue <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 对象,用于播放录音文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值