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

ops/2024/9/24 6:27:11/

一、背景简介

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

二、相关知识介绍

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

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

步骤三:请求后端接口后的处理方法
在这里插入图片描述
最终效果如下图所示
在这里插入图片描述


http://www.ppmy.cn/ops/14434.html

相关文章

42. 【Android教程】活动:Activity

从今天开始将会学习一个非常重要的概念——Android 四大组件&#xff0c;在 Android 中几乎所有的功能都和四大组件密不可分&#xff0c;而 Activity 是其中出场率最高的组件&#xff0c;也是对用户感知度最高的组件&#xff0c;当然也可以说是四大组件中最重要的一个组件。我们…

架构师系列-Nginx、OpenResty(三)- 负载均衡配置

Nginx负载均衡 负载均衡用于从“upstream”模块定义的后端服务器列表中选取一台服务器接受用户的请求&#xff0c;一个最基本的upstream模块是这样的&#xff0c;模块内的server是服务器列表&#xff1a; #动态服务器组 upstream dynamicserver {server 172.16.44.47:9001; #…

【c/c++】cpp对c的增强

&#xff08;1&#xff09;hello world代码 main.cpp文件 //包含c输出输出流的头文件&#xff0c;iostream.h //c中头文件的命名可以不再写.h的后缀&#xff0c;比如这里的iostream和test //#include "iostream" #include <iostream> #include "test&q…

在使用Dubbo时,如何高效地进行网络通信?有哪些优化策略?

在使用Dubbo时&#xff0c;如何高效地进行网络通信及其优化策略 在当前的分布式系统架构中&#xff0c;微服务已经成为了一种主流的设计模式&#xff0c;而RPC&#xff08;远程过程调用&#xff09;则是微服务之间通信的基石。Apache Dubbo作为一款高性能、轻量级的开源Java R…

c++:数据结构链表list的模拟实现

文章目录 链表的知识回顾前期工作构造节点迭代器注意构造迭代器解引用*迭代器迭代器->迭代器迭代器- -判断两个迭代器是否相等 链表empty_init构造拷贝构造swapoperatorbegin和endinsertpush_backpush_fronterasepop_backpop_frontsizeemptyclear析构 链表的知识回顾 链表是…

STM32G431RBT6之LCD与LED配置

首先,配置时钟树,时钟树的配置在我的另外一篇博客里,这里不再赘述. LCD与LED具有共同的IO口,同时创建工程较好. 打开原理图,发现LED的IO口是PC8~PC15,还有一个容易看漏的PD2.LCD的IO口是PC0到PC15. 当然,看产品手册也可以知道,但是还是推荐大家看原理图. 打开cubumx,给PC0~PC…

嵌入式4-24

作业&#xff1a; 整理思维导图 定义一个矩形类Rec&#xff0c;包含私有属性length&#xff0c;width&#xff0c;有以下成员函数&#xff1a; void set_length(int l); //设置长度 void set_width(int w); //设置宽度 int get_length(); //获取长度 int get_width(); //获取宽…

【Python-编程模式】

Python-编程模式 ■ 单例模式■ 工厂模式■■ ■ 单例模式 新建文件 str_tools.py 如下代码。 class StrTools:passstr_tool StrTools()在其他文件使用时导入该变量。 from str_tools_py import str_tool s1 str_tool s2 str_tool print(id(s1)) print(id(s2))■ 工厂模式…