读取 ICY 元数据 reactJS答案

【问题标题】：read ICY meta data reactJS读取 ICY 元数据 reactJS
【发布时间】：2019-08-24 16:03:06
【问题描述】：

您好，我想知道如何在 javascript 或 reactjs 中从流媒体站读取数据？

遗憾的是，我在谷歌上搜索过，我没有运气，我想知道是否有人知道可以读取的脚本（icecast ICY 元数据？）

【问题讨论】：

【解决方案1】：

请注意，Web 浏览器不支持 ICY 元数据，因此您必须手动实现很多东西并且只为元数据使用整个流.我不推荐这个。

正如您所说的 Icecast，获取元数据的推荐方法是查询 JSON 端点：/status-json.xsl。 It's documented.

听起来您正在为某个服务器定制构建，所以这应该是一个好方法。请注意，您必须运行最新的 Icecast 版本（至少 2.4.1，但出于安全原因，最好是最新版本）。

如果您想访问您无法控制的随机 Icecast 服务器，这会变得很复杂：https://stackoverflow.com/a/57353140/2648865

如果您想播放流和然后显示它的 ICY 元数据，请查看 miknik 的答案。（它适用于传统的 ICY 流，不适用于 WebM 或 Ogg 封装的 Opus、Vorbis 等）

【讨论】：

为什么你必须只为元数据消耗整个流？服务器将元数据拼接到 mp3 流中，您只需将它们再次分离出来，您就可以从单个流中获得音频和元数据
如果你只是需要元数据，那么你仍然需要拉整个流，只是为了渲染元数据。如果您在流开始播放之前不显示元数据，并且愿意进行 Ogg 或 WebM/MKV 容器的所有处理和可能的解析，那么这不是开销。到目前为止，实用的方法是执行带外元数据，因为这样您也可以在不播放流的情况下显示它。
啊，我明白你的意思了。我从来没有真正设想过您可能需要元数据而不播放流的情况。带外元数据的唯一问题是，如果客户端开始缓冲或您的 icecast 服务器在连接时将超过几秒钟的流推送到客户端，则使其与音频流保持同步成为一个挑战
是的，如果您正在播放流，那么最好能够访问带内元数据。不过，浏览器的情况一直很糟糕。 // 大多数时候，网络播放器之外的那些“正在播放”小部件不需要准确，所以几秒钟的偏移并不重要。

【解决方案2】：

我写了一个脚本来做这个。

它实现了一个服务工作者并使用Fetch API 和Readable Streams API 来拦截从您的页面到您的流媒体服务器的网络请求，将必要的标头添加到请求中以从您的流媒体服务器启动流内元数据，并然后在通过页面上的音频元素播放 mp3 时从响应中提取元数据。

由于对 service worker 和 Fetch API 的限制，我的脚本只有在您的网站通过 SSL 提供服务并且您的流媒体服务器和网站位于同一个域中时才能工作。

您可以在 Github 上找到代码以及它的一个非常基本的实际演示 here（打开控制台窗口以查看从 Service Worker 传递的数据）

【讨论】：

很高兴看到这样的事情在浏览器中变得可行！作为一个谦虚的请求，请明确说明这仅适用于 Icecast 的 ICY 遗留元数据。它不适用于在 MKV 或 Ogg（Opus、Vorbis、Speex 等）的容器中发送的适当的丰富元数据。
当我阅读它时，这就是 OP 所要求的。我不知道 icecast 如何对包含在除 mp3 流之外的任何内容的流元数据中启动所需的附加标头的请求作出反应，因此我向您在这方面的更多知识鞠躬。当我编写脚本时，我记得找到有关 ICY 协议如何将元数据嵌入到流中的信息并不容易找到，我似乎还记得从 20 年代初开始拖网爱好者网站以获取任何信息。带我回到我的 winamp 时代?

【解决方案3】：

我对流的了解不多，但我在谷歌上找到了一些东西，哈哈

还有这个

Developing the client for the icecast server 它用于 php，但也许您可以将其翻译为 JS。

【讨论】：