查找带有 HTML5 <audio> 标签的流式 MP3 文件答案

【问题标题】：Seeking through a streamed MP3 file with HTML5 <audio> tag查找带有 HTML5 <audio> 标签的流式 MP3 文件
【发布时间】：2023-04-11 06:00:01
【问题描述】：

希望有人能帮我解决这个问题。

我正在使用将音频流式传输到客户端的 node.js 服务器，并且我想创建一个 HTML5 播放器。现在，我正在使用分块编码从节点流式传输代码，如果你直接访问 URL，它会很好用。

我想做的是使用 HTML5 <audio> 标记嵌入它，如下所示：

<audio src="http://server/stream?file=123">

其中/stream 是节点服务器流式传输 MP3 的端点。 HTML5 播放器在 Safari 和 Chrome 中加载良好，但它不允许我搜索，而且 Safari 甚至说它是“直播”。在/stream 的标头中，我包含了文件大小和文件类型，并且响应正确结束。

有什么想法可以解决这个问题吗？我当然可以一次发送整个文件，但播放器会等到整个文件下载完毕——我宁愿流式传输它。

【问题讨论】：

我也想这样做，但我发现只有 ogg 和 m4a 格式支持。所以我不确定这是否可能。但我还在寻找。

标签： audio html streaming node.js

【解决方案1】：

确保服务器接受 Range 请求，您可以检查 Accept-Ranges 是否在标头中。在 jPlayer 中，当涉及到进度和搜索功能时，这是 Webkit（尤其是 Chrome）浏览器中的常见问题。

你可能没有使用jPlayer，但是官网的Server Response信息可能有点用处。

http://www.jplayer.org/latest/developer-guide/#jPlayer-server-response

【讨论】：

感谢您指出 jplayer - 不敢相信我以前没有听说过它
太棒了！像魅力一样工作。 Seek 不是在 Chrome 上工作，而是在 Firefox 和 Safari 上工作。在 header 中添加了 Accept-Ranges，并开始工作。
呵呵...你的意思是玩家基本上知道在给定的秒内请求什么字节范围？

【解决方案2】：

但我遇到了同样的问题。需要为媒体文件响应设置一些标头。

例如：

Accept-Ranges:bytes
Content-Length:7437847
Content-Range:bytes 0-7437846/7437847

然后audio标签就可以搜索了

【讨论】：

在我的 WCF 应用程序中，在响应标头上添加最后一个参数：Content-Range:0-(file size)/(file size) 以及您提到的其他参数，工作正常！
非常感谢，在得知服务器必须发出这些标头之前，这一直是个谜。 Content-Range 在规范中显然是“可选的”，但如果您是移动 iOS x 上的 WebKit，则不是）

【解决方案3】：

看看这里http://www.scottandrew.com/pub/html5audioplayer/，我用过它，它在下载文件时播放。它稍等片刻等待缓冲区，然后播放。虽然从未尝试过寻找，但如果可以的话，我会尝试在他的代码中设置“aud.currentTime”。

祝你好运

【讨论】：

【解决方案4】：

您是否发送 Accept-Ranges (RFC 2616, Section 14.5) 响应标头？

【讨论】：

也许我最初的问题并不太清楚：我只想在视频的缓冲部分中寻找，所以目前不需要字节范围请求。

【解决方案5】：

据我了解，您希望播放器允许用户跳转到尚未缓冲的音频/视频部分，就像 Vimeo / YouTube 播放器所做的那样。我不确定这是否是可能的，因为我已经查看了一些 html5 中间元素的示例，但它们只是不允许我寻找无缓冲部分:(

如果您想通过缓冲部分进行搜索 - 那么这不是问题。事实上 - 据我了解，您在这里为自己制造了一个问题。您想要流式传输文件，这样做会使播放器认为您在那里有某种直播。如果您只是直接发送文件 - 您将不会遇到此问题，因为播放器将能够在加载整个文件之前开始播放。这适用于音频和视频元素，我已经在 Chrome 和 FF 中确认了这种行为:)

希望这会有所帮助！

【讨论】：

由于当地政策，我无法将文件直接提供给客户端播放器。当我重新开始播放或寻找开始时，没有发出新的请求，它从缓冲的内容开始播放。我无法寻找其他任何地方。

【解决方案6】：

也许这个html5 audio player example 会向我们解释和演示新元素及其.load、.play、.currentTime 等方法。

我使用一个元素数组，当然可以设置 currentTime 位置。我们也可以使用事件处理程序（例如'loadeddata'）在允许搜索之前等待。

ping 并享受 html5 的乐趣 :)

【讨论】：