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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/321.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【PCL】教程alignment_prerejective.cpp 刚性物体的鲁棒位姿估计

The viewer window provides interactive commands; for help, press h or H from within the window. > Loading V:\learn\PCL\pcl\examples\test\chef.pcd [PCLVisualizer::setUseVbos] Has no effect when OpenGL version is 鈮?2 [done, 327.147 ms : 5092 points] Ava…

【torch函数】torch.multinomial函数

torch.multinomial 是PyTorch中的一个函数&#xff0c;用于从多项分布中抽取样本。多项分布是一种描述多个可能结果的概率分布&#xff0c;例如抛硬币、掷骰子等。 torch.multinomial的用法如下&#xff1a; torch.multinomial(input, num_samples, replacementFalse, *, gene…

C++入门之类和对象(下)

C入门之类和对象(下) 文章目录 C入门之类和对象(下)一、初始化列表1.1 概念1.2 注意事项 11.3 注意事项 21.4 注意事项 3 二、explicit关键字2.1 为什么要有explicit关键字 三、static成员3.1 static修饰类的成员和成员函数 一、初始化列表 1.1 概念 先来看看构造函数 #incl…

MySQL 中 InnoDB 存储引擎使用的 B+树底层数据结构

简要介绍 InnoDB 和它为什么选择使用 B树 InnoDB 是 MySQL 中默认的存储引擎&#xff0c;广泛用于生产环境中&#xff0c;特别是在要求高可靠性和事务性的应用场景。这个存储引擎支持事务处理、行级锁定、外键约束等高级数据库功能&#xff0c;这使得它非常适合处理大量数据并…

力扣爆刷第122天之CodeTop100五连刷96-100

力扣爆刷第122天之CodeTop100五连刷96-100 文章目录 力扣爆刷第122天之CodeTop100五连刷96-100一、912. 排序数组二、24. 两两交换链表中的节点三、297. 二叉树的序列化与反序列化四、560. 和为 K 的子数组五、209. 长度最小的子数组 一、912. 排序数组 题目链接&#xff1a;h…

AI大模型量化格式介绍(GPTQ,GGML,GGUF,FP16/INT8/INT4)

在 HuggingFace 上下载模型时&#xff0c;经常会看到模型的名称会带有fp16、GPTQ&#xff0c;GGML等字样&#xff0c;对不熟悉模型量化的同学来说&#xff0c;这些字样可能会让人摸不着头脑&#xff0c;我开始也是一头雾水&#xff0c;后来通过查阅资料&#xff0c;总算有了一些…

嵌入式学习57-ARM6(linux驱动启动程序)

知识零碎&#xff1a; arm2440 精简指令集架构 …

MongoDB聚合运算符:$reverseArray

MongoDB聚合运算符&#xff1a;$reverseArray 文章目录 MongoDB聚合运算符&#xff1a;$reverseArray语法使用举例 $reverseArray聚合运算符接受数组表达式作为参数&#xff0c;并返回一个元素按相反顺序排列的数组。 语法 { $reverseArray: <array expression> }参数可…

DFS之剪枝(上交考研题目--正方形数组的数目)

题目 给定一个非负整数数组 A A A&#xff0c;如果该数组每对相邻元素之和是一个完全平方数&#xff0c;则称这一数组为正方形数组。 返回 A A A 的正方形排列的数目。 两个排列 A 1 A1 A1 和 A 2 A2 A2 不同的充要条件是存在某个索引 i i i&#xff0c;使得 A 1 [ i …

Spring MVC found on classpath, which is incompatible with Spring Cloud Gateway.

报错信息 Description: Spring MVC found on classpath, which is incompatible with Spring Cloud Gateway. Action: Please set spring.main.web-application-typereactive or remove spring-boot-starter-web dependency.解析 这个错误信息是因为你的项目中同时存在…

前端基础(之五)

Q1: git常用的命令有哪些 git init 在当前目录下创建一个新的Git仓库 git clone 复制一个远程仓库到本地 git add 将文件添加到暂存区&#xff0c;准备提交 git commit 提交暂存区的更改到本地仓库&#xff0c;并记录提交信息 git status 查看仓库的当前状态&am…

头歌平台云计算实验

云计算 Hive综合应用案例——用户学历查询1 查询每一个用户从出生到现在的总天数2 同一个地区相同的教育程度的最高收入3 统计各级学历所占总人数百分比 Hive综合应用案例——用户学历查询 1 查询每一个用户从出生到现在的总天数 ---------- 禁止修改 ----------drop databas…

测试一下 Meta Llama3-70b-Instruct-q8

测试一下 Meta Llama3-70b-Instruct-q8 0. 引言1. 测试 Meta Llama3-70b-Instruct-q8 0. 引言 今天&#xff0c;Meta 正式介绍Meta Llama 3&#xff0c;Meta 开源大型语言模型的下一代产品。 这次发布包括具有80亿&#xff08;8B&#xff09;和700亿&#xff08;70B&#xff0…

5G 边缘计算如何赋能工业自动化生产线?

5G边缘计算为工业自动化生产线带来的赋能主要体现在以下几个方面&#xff1a; 低延迟与高可靠性&#xff1a;5G网络的低延迟特性对于工业自动化是至关重要的&#xff0c;特别是在需要快速响应的生产线上。边缘计算可以在数据产生地点附近处理数据&#xff0c;从而进一步减少通信…

LeetCode-最大子数组和

每日一题 今天刷到的是一道利用动态规划解决的题目 题目要求 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-…

指纹浏览器如何高效帮助TikTok账号矩阵搭建?

TikTok的账号矩阵&#xff0c;可能听起来还比较陌生&#xff0c;但随着TikTok业务已经成为吃手可热的跨境业务&#xff0c;TikTok多账号矩阵已成为流行策略。但它有什么优点呢&#xff1f;操作多个帐户会导致被禁止吗&#xff1f;如何有效地建立账户矩阵开展业务&#xff1f;这…

第十三章数据质量10分

原则&#xff1a;重要的数据先开始。 重点&#xff1a;PDCA&#xff1b;评估数据质量维度&#xff1b;根因分析&#xff1b;数据质量报告13.1 引言 有数据质量团队&#xff08;Data Quality Program Team&#xff09;。 数据质量团队负责与业务和技术数据管理专业人员协作&…

CANfestival 主机进入预操作态(preOperational)自动发送复位节点指令。

核心是iam_a_slave ,这个是字典生产的时候自动生成的。

【Flutter】多语言方案一:flutter_localizations 与 GetX 配合版

系列文章目录 多语言方案&#xff1a;flutter_localizations 与 GetX 配合版&#xff0c;好处&#xff1a;命令行生成多语言字符串的引用常量类&#xff0c;缺点&#xff1a;切换语言以后&#xff0c;主界面需要手动触发setState&#xff0c;重绘将最新的Locale数据设置给GetM…

使用LangChain和Llama-Index实现多重检索RAG

大家好&#xff0c;在信息检索的世界里&#xff0c;查询扩展技术正引领着一场效率革命。本文将介绍这一技术的核心多查询检索&#xff0c;以及其是如何在LangChain和Llama-Index中得到应用的。 1.查询扩展 查询扩展是一种信息检索技术&#xff0c;通过在原始查询的基础上增加…