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

Question

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

有关问题的现场示例，请访问此网页。

---

问题

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

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

当命中 ~32 kB 时，浏览器将触发loadeddata事件和 a readyStateof 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>

我尝试“ping”它，.play()但没有成功。

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

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

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

---

问题

1. 有谁知道如何强制，.play()即使readyState是0或在canplay事件发生之前？
2. 有没有办法修改初始缓冲区/延迟设置？
3. 除了在文件头页中放置 30 kB 的垃圾之外还有什么想法吗？

---

更新信息

我在audio.readyStateChrome 允许的情况下尽可能频繁地记录，并发现它在触发前几毫秒从0("HAVE_NOTHING") 变为1(HAVE_METADATA) loadeddata。正如我之前提到的，它更改为3("HAVE_FUTURE_DATA") 并带有loadeddata.

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

12:49:36.199 StreamTest.php:94 0（页面加载）

...（打印“0”） ...

12:49:54.497 StreamTest.php:94 0

12:49:54.503 StreamTest.php:94 1

12:49:54.505 StreamTest.php:74 加载数据事件

12:49:54.505 StreamTest.php:75 3

12:49:54.505 StreamTest.php:66 可以播放事件

更新 2

这些是流标头：

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

为了减少延迟，您可以复制音频通道（最多 8 个）和/或进行升级