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);
        });
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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标签用于播放音频

1
2
3
4
5
6

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

最终效果如下图所示