HTML5 音频流延迟，强制播放？

Question

如何让 HTML5 音频元素立即开始播放低比特率音频流？

有关问题的现场示例，visit this webpage .

问题

我正在将低比特率的 ogg/opus 流式传输到 HTML5 音频元素。除了一个问题外，它运行良好。

在我测试过的两个浏览器(Chrome 和 Firefox)上，浏览器会缓冲直到收到 32 kB 的数据。这可以是音频文件中 20-40 秒的任何位置。

当命中 ~32 kB 时，浏览器会触发 loadeddata事件以及 readyState的 3 ，紧接着是 canplay事件。

示例代码:

<audio id="test" controls="controls" autoplay>
<source src="https://SCRIPT" type="audio/ogg; codecs=opus"/>
</audio>

<script>
var obj = document.getElementById('test');

obj.addEventListener('canplay', function() {
    console.log("Can play event");
});

obj.addEventListener('canplaythrough', function() {
    console.log("can play through event");
});

obj.addEventListener('loadeddata', function() {
    console.log("Loaded data event");
    console.log(obj.readyState);
});
</script>

我尝试用 .play()“ping”它但那是不成功的。

当加入至少一分钟的流时(服务器可以立即提供大量数据)，音频基本上立即开始播放。问题是当流是新的(即刚刚创建)并且没有足够的数据来触发看似任意的播放点时，因为应用程序应该是低开销的。

这种延迟水平是 Not Acceptable ，坦率地说，这确实令人困惑。为什么与要求更高的流相比，您延迟开销较低的流的时间更长？这与人们认为的常识相反。

我有更复杂的解决方法，但最好使用广泛使用的 HTML5 音频来完成这项工作。

问题

有谁知道怎么强制.play()即使 readyState是 0或之前 canplay事件？

有没有办法修改初始缓冲区/延迟设置？

除了在文件头页中放置 30 kB 的垃圾之外还有什么想法吗？

更新信息

我登录了 audio.readyState Chrome 允许并发现它从 0 变化的频率("HAVE_NOTHING") 到 1 (HAVE_METADATA) 几毫秒前 loadeddata火灾。正如我之前提到的，它更改为 3 (“HAVE_FUTURE_DATA”)与 loadeddata .

这是 Chrome 的日志示例，末尾的整数是 readyState

12:49:36.199 StreamTest.php:94 0 (page load)

... (Prints "0") ...

12:49:54.497 StreamTest.php:94 0

12:49:54.503 StreamTest.php:94 1

12:49:54.505 StreamTest.php:74 Loaded data event

12:49:54.505 StreamTest.php:75 3

12:49:54.505 StreamTest.php:66 Can play event

更新 2

这些是流 header :

HTTP/1.0 200 OK
Date: Sun, 25 Mar 2018 08:54:07 GMT
Server: Apache
Accept-Ranges: none
Cache-Control: max-age=0, no-cache, no-store, must-revalidate
Pragma: no-cache
Connection: close
Expires: Wed, 11 Jan 1984 05:00:00 GMT
X-Frame-Options: sameorigin
Content-Type: audio/ogg; codecs=opus

测试页

更新 3

我创建了一个包含一些测试的测试页面来演示 HTML5 音频播放行为。查看此网页: http://webtests.online/LiveHTML5Audio.php

Answer 1

为了减少延迟，您可以只复制音频 channel (最多 8 个)和/或进行升级