vue获取文件流（视频流音频流图片流）数据并将其回显展示

Posted 2023-04-11 Robergean

前言

这几天深受数据回显的折磨，级联选择器的回显还没想出怎么弄，又碰到了文件流的回显，主要第一次接触，看着一堆乱码，连是什么问题都不懂，后面通过查阅一天的资料，总结了一下方法，若有不足，请多指教。

问题描述

向后端请求音频文件，请求成功后返回给你的一种数据，而不是直接路径什么的，据说是流传输是为了安全，所以这里就需要前端进行转码了。

接口回参：

数据获取

如果我们在请求接口获取数据时不指定返回数据类型的话，我们获取到的可能就是一堆乱码数据。
因此我们在axios接口请求里面需要指定responseType为blob

打印观察后的 blob 数据

数据展示

获取到数据之后用对应标签进行展示，例如 audio标签 中的 src 需要直接指向 blob 数据的话是没有用的，所以应该创建一个 url 来指向的的 blob 数据，然后将 url 赋给 audio 的 src 属性。

window.URL.createObjectURL()

1. URL： 在调用URL的构造函数时将URL指定为字符串或提供相对URL和基本URL来创建新的URL对象。 然后，您可以轻松读取URL的已解析组成部分或对URL进行更改。若浏览器不支持URL()构造函数，则使用Window中的Window.URL属性。
2. createObjectURL：
   createObjectURL返回一个DOMString包含一个唯一的blob链接。

这就是通过window.URL.createObjectURL(res.data);将之前音频数据转换成 blob 链接

最后将这个链接的属性赋值到src下就行了

补充

如果用uni-app开发的话，就在 request 里写 responseType: "arraybuffer"

iPhone音频流 - 保存状态？

【中文标题】iPhone音频流 - 保存状态？

【英文标题】：iPhone audio streaming - saving state?

【发布时间】：2009-04-04 05:25:32

【问题描述】：

如何保存当前由我的应用流式传输的音频文件的当前状态。我想在用户离开的地方开始播放歌曲（就像潘多拉在听歌时所做的那样）

现在我正在获取正在播放的数据包编号。从数据包编号中，我得到字节编号并将其发送到 Range 标头字段中。但这不起作用，并从头返回整首歌曲。

我正在使用 AudioFileStream 和 CFHTTPStream 流式传输音频。

谢谢。

【问题讨论】：

值得检查一下，无论您从哪里进行流式传输，都支持范围标头

【参考方案1】：

我们就是这样做的（尽管我们使用 NSURLConnection）。听起来您的服务器不尊重范围标头。从那里开始调试 - 问题是您的服务器不支持范围标头或您的客户端未正确发送它。

【参考方案2】：

这在很大程度上取决于流媒体服务器的功能。大多数常见的流媒体服务器不支持范围 - 例如 Shoutcast 或 Icecast。

【讨论】：

谢谢约翰。那么潘多拉是如何做到的呢？他们也必须使用范围参数才能从用户离开的地方开始播放歌曲？

潘多拉的魔力在于服务器。我猜他们是从头开始建立自己的。

我检查了我的服务器。它支持 Range 标头。所以这不是问题。现在我该怎么做？

我猜没有具有搜索功能的流媒体服务器。但是，如果我们谈论从 Web 服务器读取 MP3，那么您肯定可以使用 Range 标头，所有现代 Web 服务器都必须支持它。