Vue接收接口返回的mp3格式数据并支持在页面播放音频 |
您所在的位置：网站首页 › vue怎样添加自己想要的音乐 › Vue接收接口返回的mp3格式数据并支持在页面播放音频 |
Vue接收接口返回的mp3格式数据并支持在页面播放音频
|
一、背景简介
在实际工作中需要开发一个转音频工具，并且能够在平台页面点击播放按钮播放音频 二、相关知识介绍 2.1 JS内置对象BlobBlob对象通常用于处理大量的二进制数据，可以读取/写入/操作文件、音视频等二进制数据流。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，因此它的行为在不同的浏览器中应该是相同的。 三、实际应用步骤一： 步骤二：使用audio标签用于播放音频 步骤三：请求后端接口后的处理方法 |
注意：当后端接口返回结果是一个二进制音频数据时，前端在使用axios请求时需要添加一段额外信息{responseType: 'blob'}
最终效果如下图所示 
【本文地址】
今日新闻 |
推荐新闻 |