首页 文章

通过HTML5 <audio>标签查找流式MP3文件

提问于
浏览 次
23

希望有人可以帮助我解决这个问题 .

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

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

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

其中 /stream 是节点服务器流式传输MP3的 endpoints . HTML5播放器在Safari和Chrome中加载得很好，但它并没有"Live Broadcast" . 在 /stream 的 Headers 中，我包含文件大小和文件类型，并且响应正确结束 .

有关如何解决这个问题的任何想法？我当然可以立即发送整个文件，但是玩家会等到整个文件被下载 - 我宁愿传输它 .

html audio html5 streaming node.js

6 回答

  • 5

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

    您可能没有使用jPlayer，但官方网站上的服务器响应信息可能有些用处 .

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

    回复于
  • 2

    看看这里http://www.scottandrew.com/pub/html5audioplayer/，我用它，它在下载文件时播放 . 它等待缓冲区然后播放 . 从来没有试过寻求，但我会先尝试在他的代码中设置"aud.currentTime"，如果可以的话 .

    祝好运

    回复于
  • -1

    你发送一个Accept-Ranges（RFC 2616, Section 14.5)响应 Headers ？

    回复于
  • -1

    但我遇到了同样的问题 . 必须为媒体文件响应设置一些标头 .

    例如：

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

    然后音频标签将能够寻找

    回复于
  • 1

    根据我的理解，你希望播放器允许用户跳转到尚未缓冲的部分音频/视频，比如Vimeo / YouTube播放器所做的事情.Tbh我不确定这是否可行，如我看了一些html5 medial元素的例子，他们只是不允许我寻找无缓冲的部分:(

    如果你想通过缓冲部分寻找 - 那么这不是问题 . 事实上 - 就我所知，你在这里为自己创造了一个问题 . 您想要流式传输文件，这样做会让玩家认为您有某种直播流 . 如果您只是直接发送文件 - 您就不会遇到此问题，因为播放器可以在加载整个文件之前开始播放 . 这适用于音频和视频元素，我已经在Chrome和FF中确认了这种行为:)

    希望这可以帮助！

    回复于
  • 0

    也许这个html5 audio player example将解释并向我们展示新元素及其.load，.play，.currentTime等方法 .

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

    ping并享受html5 :)

    回复于

相关问题