axios

这里是请求了个mp3做例子；

this.$axios({

    methods:"GET",

    url:"/api/music/soures/双笙.mp3",

    responseType:'blob'

}).then(res=>{

    let blob=new Blob([res.data],{type:res.data.type});

    let url=window.URL.createObjectURL(blob);

    this.music=url

})

可能会遇到地址生成 但音视频并没有播放；

<video controls="" autoplay="" loop v-if="music">

    <source :src="music" type="audio/mpeg">

</video>

文件流转blob并播放的更多相关文章

  1. 文件流转换(一般用于axios设置接收文件流设置时responseType: 'blob')

    文件流转换 一般用于axios设置接收文件流设置时responseType: 'blob'当接口报错时,前端因已设置responseType: 'blob'无法再接收json格式数据,会把json格式 ...

  2. 实现php获取mp3文件元信息如播放时间歌曲作者等

    最近收集到一个php获取mp3文件元信息的类,感觉比较方便.现在分享给大家! 下面是使用方式和测试方式: <?php include_once 'mp3file.class.php'; func ...

  3. Android音频处理——通过AudioRecord去保存PCM文件进行录制，播放，停止，删除功能

    Android音频处理--通过AudioRecord去保存PCM文件进行录制,播放,停止,删除功能 音频这方面很博大精深,我这里肯定讲不了什么高级的东西,最多也只是一些基础类知识,首先,我们要介绍一下 ...

  4. H5页面实现一个Audio标签加载多个音频文件，并进行播放和展示音频长度

    最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...

  5. delphi 怎么将一个文件流转换成字符串（String到流，String到文件，相互转化）

    //from   http://kingron.myetang.com/zsfunc0d.htm (*//   标题:充分利用pascal字符串类型   说明:和PChar不同,string可以保存# ...

  6. java调用本地播放器播放视频文件。调用本地播放器不能播放指定文件的说明。

    public class OpenExe extends HttpServlet { //打开本地播放器并播放视频 public static void openExe(String file) { ...

  7. PPT文件流转为图片，并压缩成ZIP文件输出到指定目录

    实现流程: 接收InputStream流->复制流->InputStream流转为PPT->PPT转为图片->所有图片压缩到一个压缩文件下 注意: 1.PPT文件分为2003和 ...

  8. h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式

    在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放.这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自 ...

  9. 前端vue下载文件时blob返回流中怎么获取文件名

    我很久之前写了一篇前端vue利用blob对象下载文件,有些人私信我,如果后端返回流失败,给出的json对象该怎么获得?前端获取的流怎么能获取原文件名?其实在那篇文章之后,我就已经针对这两个问题进行了优 ...

随机推荐

  1. OpenCV图像处理学习笔记-Day03

    OpenCV图像处理学习笔记-Day03 目录 OpenCV图像处理学习笔记-Day03 第31课:Canny边缘检测原理 第32课:Canny函数及使用 第33课:图像金字塔-理论基础 第34课:p ...

  2. C++逐字输出函数

    void fun(string a) { for(int i=0;i<a.length();i++) { cout<<a[i]; usleep(10000); } cout<& ...

  3. 【小白学PyTorch】19 TF2模型的存储与载入

    [新闻]:机器学习炼丹术的粉丝的人工智能交流群已经建立,目前有目标检测.医学图像.时间序列等多个目标为技术学习的分群和水群唠嗑的总群,欢迎大家加炼丹兄为好友,加入炼丹协会.微信:cyx64501661 ...

  4. Java知识系统回顾整理01基础01第一个程序01JDK 安装

    一.首先第一步看JDK配置成功后的效果 点WIN键->运行(或者使用win+r) 输入cmd命令 输入java -version 注: -version是小写,不能使用大写,java后面有一个空 ...

  5. Matlab2016b安装流程

    来源:https://jingyan.baidu.com/article/59703552da12ab8fc007402b.html Matlab2016b安装教程 听语音 原创 | 浏览:34338 ...

  6. webRTc实现视频直播

    <!DOCTYPE html> <html> <head> <script type='text/javascript' src='https://cdn.s ...

  7. 达梦产品技术支持培训-day6-DM性能诊断与优化

    (本文只作为个人随笔用途,非官方文档,请勿作他用,谢谢) 1.DM8查询优化基本思路 1.1 操作系统性能诊断 linux常用系统监控命令 使用 top 命令查看cpu使用率 使用 iostat 命令 ...

  8. VueCroppie

    下载 VueCroppie VueCroppie是一个Vue 2包装Croppie一个美丽的照片裁剪工具的Javascript由foliotek. 安装 NPM 安装vue-croppie-保存 CD ...

  9. css做模糊处理

    -webkit-filter: blur(9px); filter: blur(9px);

  10. 2017年 实验三 C2C模拟实验

    [实验目的] 掌握网上购物的基本流程和C2C平台的运营 [实验条件] ⑴.个人计算机一台 ⑵.计算机通过局域网形式接入互联网. (3).奥派电子商务应用软件 [知识准备] 本实验需要的理论知识:C2C ...