查找带有 HTML5 <audio> 标签的流式 MP3 文件
Posted
技术标签:
【中文标题】查找带有 HTML5 <audio> 标签的流式 MP3 文件【英文标题】:Seeking through a streamed MP3 file with HTML5 <audio> tag 【发布时间】:2011-02-17 10:35:56 【问题描述】:希望有人能帮我解决这个问题。
我正在使用将音频流式传输到客户端的 node.js 服务器,并且我想创建一个 html5 播放器。现在,我正在使用分块编码从节点流式传输代码,如果你直接访问 URL,它会很好用。
我想做的是使用 HTML5 <audio>
标记嵌入它,如下所示:
<audio src="http://server/stream?file=123">
其中/stream
是节点服务器流式传输 MP3 的端点。 HTML5 播放器在 Safari 和 Chrome 中加载良好,但它不允许我搜索,而且 Safari 甚至说它是“直播”。在/stream
的标头中,我包含了文件大小和文件类型,并且响应正确结束。
有什么想法可以解决这个问题吗?我当然可以一次发送整个文件,但播放器会等到整个文件下载完毕——我宁愿流式传输它。
【问题讨论】:
我也想这样做,但我发现只有 ogg 和 m4a 格式支持。所以我不确定这是否可能。但我还在寻找。 【参考方案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 的乐趣 :)
【讨论】:
以上是关于查找带有 HTML5 <audio> 标签的流式 MP3 文件的主要内容,如果未能解决你的问题,请参考以下文章