Vue接收接口返回的mp3格式数据并支持在页面播放音频

一、背景简介

在实际工作中需要开发一个转音频工具,并且能够在平台页面点击播放按钮播放音频

二、相关知识介绍

2.1 JS内置对象Blob

Blob对象通常用于处理大量的二进制数据,可以读取/写入/操作文件、音视频等二进制数据流。Blob表示了一段不可变的二进制数据。

  • 当你需要从服务器下载文件时,你可以将响应类型设置为'blob',然后通过 window.URL.createObjectURL(blob) 方法创建一个表示该Blob的url,最后将这个url用于下载链接
  • 当你需要上传文件时,你可以通过File API获取到一个Blob对象,然后通过FormData API将它发送到服务器
  • 当你需要在浏览器中处理大量的二进制数据时,比如视频、音频或图片,Blob对象可以提供一个有效的处理方式

一个自己没有验证过的栗子

new Vue({
  el: '#app',
  methods: {
    downloadFile() {
      fetch('https://example.com/somefile.txt')
        .then(response => response.blob())
        .then(blob => {
          let url = window.URL.createObjectURL(blob);
          let a = document.createElement('a');
          a.href = url;
          a.download = 'somefile.txt';
          a.click();
          window.URL.revokeObjectURL(url);
        });
    }
  }
});

2.2 Vue中fetch和axios请求后端API的区别

  1. 功能和灵活性:
    axios:axios是一个基于Promise的HTTP库,可以在浏览器和Node.js中使用。它提供了更多的功能和灵活性,例如拦截请求和响应、转换请求和响应数据、取消请求、自动转换JSON数据等。这些功能可以帮助你更方便地处理HTTP请求和响应。
    fetch:fetch是一个现代的浏览器内置函数,用于发送HTTP请求。它返回一个Promise对象,可以用来处理异步操作。然而,fetch API本身的功能比较有限,需要配合其他工具或库来处理请求和响应数据。
  2. 错误处理:
    axios:axios使用Promise API,可以利用catch方法来捕获错误并进行处理。它还提供了onDownloadProgress和onUploadProgress回调函数,可以用于处理下载和上传进度事件。
    fetch:fetch返回的Promise对象可以使用catch方法来捕获错误。但是,由于fetch不提供下载和上传进度的回调函数,因此需要在fetch请求中自行实现。
  3. 浏览器兼容性:
    fetch:fetch API在大多数现代浏览器中得到了广泛支持,但在一些较旧的浏览器版本中可能不受支持。为了确保兼容性,可能需要使用polyfill或替代方案。
    axios:axios是一个独立的库,可以在任何支持Promise的浏览器中使用,因此具有更好的浏览器兼容性。
  4. 社区和支持:
    axios:axios拥有庞大的用户基础和活跃的社区支持,这意味着你可以在遇到问题时更容易找到解决方案和帮助。
    fetch:fetch是浏览器内置的API,因此没有像axios那样的社区支持。但是,由于它是标准化的API,因此它的行为在不同的浏览器中应该是相同的。

三、实际应用

步骤一:

注意:当后端接口返回结果是一个二进制音频数据时,前端在使用axios请求时需要添加一段额外信息{responseType: 'blob'}

步骤二:使用audio标签用于播放音频

<audio
	ref="audioPlayer"
	:src="audioUrl"
	controls
>
</audio>

步骤三:请求后端接口后的处理方法

最终效果如下图所示

相关推荐
前端李易安2 小时前
Web常见的攻击方式及防御方法
前端
PythonFun2 小时前
Python技巧:如何避免数据输入类型错误
前端·python
hakesashou2 小时前
python交互式命令时如何清除
java·前端·python
天涯学馆2 小时前
Next.js与NextAuth:身份验证实践
前端·javascript·next.js
HEX9CF2 小时前
【CTF Web】Pikachu xss之href输出 Writeup(GET请求+反射型XSS+javascript:伪协议绕过)
开发语言·前端·javascript·安全·网络安全·ecmascript·xss
ConardLi2 小时前
Chrome:新的滚动捕捉事件助你实现更丝滑的动画效果!
前端·javascript·浏览器
ConardLi3 小时前
安全赋值运算符,新的 JavaScript 提案让你告别 trycatch !
前端·javascript
凌云行者3 小时前
使用rust写一个Web服务器——单线程版本
服务器·前端·rust
华农第一蒟蒻3 小时前
Java中JWT(JSON Web Token)的运用
java·前端·spring boot·json·token
积水成江3 小时前
关于Generator,async 和 await的介绍
前端·javascript·vue.js