一、背景简介
在实际工作中需要开发一个转音频工具，并且能够在平台页面点击播放按钮播放音频
二、相关知识介绍
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的区别
- 功能和灵活性：
axios：axios是一个基于Promise的HTTP库，可以在浏览器和Node.js中使用。它提供了更多的功能和灵活性，例如拦截请求和响应、转换请求和响应数据、取消请求、自动转换JSON数据等。这些功能可以帮助你更方便地处理HTTP请求和响应。
fetch：fetch是一个现代的浏览器内置函数，用于发送HTTP请求。它返回一个Promise对象，可以用来处理异步操作。然而，fetch API本身的功能比较有限，需要配合其他工具或库来处理请求和响应数据。 - 错误处理：
axios：axios使用Promise API，可以利用catch方法来捕获错误并进行处理。它还提供了onDownloadProgress和onUploadProgress回调函数，可以用于处理下载和上传进度事件。
fetch：fetch返回的Promise对象可以使用catch方法来捕获错误。但是，由于fetch不提供下载和上传进度的回调函数，因此需要在fetch请求中自行实现。 - 浏览器兼容性：
fetch：fetch API在大多数现代浏览器中得到了广泛支持，但在一些较旧的浏览器版本中可能不受支持。为了确保兼容性，可能需要使用polyfill或替代方案。
axios：axios是一个独立的库，可以在任何支持Promise的浏览器中使用，因此具有更好的浏览器兼容性。 - 社区和支持：
axios：axios拥有庞大的用户基础和活跃的社区支持，这意味着你可以在遇到问题时更容易找到解决方案和帮助。
fetch：fetch是浏览器内置的API，因此没有像axios那样的社区支持。但是，由于它是标准化的API，因此它的行为在不同的浏览器中应该是相同的。
三、实际应用
步骤一：
注意：当后端接口返回结果是一个二进制音频数据时，前端在使用axios请求时需要添加一段额外信息{responseType: 'blob'}
步骤二：使用audio标签用于播放音频
<audio
ref="audioPlayer"
:src="audioUrl"
controls
>
</audio>
步骤三：请求后端接口后的处理方法
最终效果如下图所示
