前端下载音频的两种处理方式

页面音频下载遇到的问题记录

一、后端给的音频地址是个音频流

这种情况，前端可以直接下载，示例如下：window.location.href=audioUrl;

二、后端给的音频地址是个播放地址

这种情况，前端需要再次请求，将播放地址返回结果转为blob流，然后进行下载，示例如下：

 //音频地址let audioPath = audioUrl;//音频名称let audioName = 'aaa.mp3';axios({method:'get',url:audioPath,responseType:'blob',}).then((res) => {// 为blob设置文件类型let blob = new Blob([res.data]);// 创建一个临时的url指向blob对象let url = window.URL.createObjectURL(blob); //创建一个a标签，用来下载let a = document.createElement("a");a.href = url;a.download = audioName;a.click();// 释放这个临时的对象urlwindow.URL.revokeObjectURL(url);})

前端下载音频的两种处理方式相关推荐

Web前端下载文件的几种常见方式
1 标签or点击事件标签下载 <a href="xxxxx"> 或 <a href="xxxxx" download="xxxx& ...
记录一下前端针对下载文件的两种请求方式
之前做了很多下载文件的接口都没习惯进行记录,现在开始规范自己,让自己养成一个随手保存代码的好习惯.写的不足之处请指出,会改正. 说一下前端下载文件常用的两种方式,get请求和post请求 get请求相 ...
微信中下载app共有两种实现方式，然而安卓手机跟苹果手机还尽然不同。
1.苹果用户打开后要么自动调起App Store下载(前提是你的应用在苹果商店上架了):要么是去Safari下载. 2.安卓用户打开链接后要么直接下载,要么前往手机默认浏览器下载. 以上是最好的实现方 ...
python的下载安装以及两种打开方式
当你安装了python之后,需要打开编辑器界面. python的官网下载请点击将其下载之后,右键我的电脑->属性 ->高级系统设置 ->环境变量之后找到系统变量,双击path ...
下载文件时两种返回方式
返回文件流 public void downloadFloodInfo(HttpServletRequest request, HttpServletResponse response) {Strin ...
c语言实现路由功能,前端路由的两种实现方式，内附详细代码
一.前端路由介绍前端路由主要应用在SPA(单页面开发)项目中.在无刷新的情况下,根据不同的URL来显示不同的组件或者内容. 前端路由的实现原理 : hash值 + onhashchange事件 hi ...
React基础学习笔记（一）-react前端项目的两种搭建方式
1.运行环境准备需要先进行react项目的运行环境nodeJS的安装,具体安装流程可以参考: windows版本的安装配置帮助文档:https://www.cnblogs.com/liuqiyun/ ...
前端与后端，顶象设备指纹的两种接入方式
在如今的移动互联网时代,用户上网的设备多元化.连接互联网的渠道多样化.接入服务的地点任意化,用户的操作行为个性化,用户设备更加难以被识别和跟踪,由此给广大开展数字化业务的企业,尤其互联网企业带来全新的 ...
前端下载文件的几种方式
前端下载文件的几种方式前言 1. window.open 2. window.location.href 3. a标签 4. iframe 5. blob 前言总结下载文件的几种方式,文件都是通过 ...
*现在感觉librealsense和realsense-ros的安装挺简单的（普通X86平台）（现在发现都有两种安装方式，下载源码编译或者二进制安装）
下面说的就是在普通X86平台上,不是在ARM平台,不在树莓派,TX2这些平台上. 之前潜意识里似乎还觉得会比较麻烦,实际我现在真正再看一下,回看一下,不是这样的.可能就像装双系统一样,实际并不麻烦,跟 ...

前端下载音频的两种处理方式

页面音频下载遇到的问题记录

一、后端给的音频地址是个音频流

二、后端给的音频地址是个播放地址

前端下载音频的两种处理方式相关推荐

最新文章

热门文章