问题

我正在将低比特率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>

我试过＆＃34; pinging＆＃34;它与.play()但是没有成功。

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

这种等待时间是不可接受的，坦率地说，它确实令人困惑。为什么你会比使用更苛刻的流更长时间地延迟流量更低的流？它与人们认为常识相反。

我考虑到了更为复杂的工作，但是使用广泛使用的HTML5音频来理解它是理想的。

问题

有人知道即使.play()是readyState还是0事件之前如何强制canplay？
有没有办法修改初始缓冲区/延迟设置？
除了在文件标题页中添加30 kB垃圾之外的任何想法吗？

更新信息

我按照Chrome允许的频率记录了audio.readyState，并发现它在0（＆＃34; HAVE_NOTHING＆＃34;）之前的几分钟1（HAVE_METADATA）发生了变化{ {1}}火灾。正如我之前提到的，它会loadeddata更改为3（＆＃34; HAVE_FUTURE_DATA＆＃34;）。

以下是Chrome的日志示例，最后的整数是loadeddata

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

...（打印＆＃34; 0＆＃34;）......

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

这些是流标题：

readyState

测试页

更新3

我创建了一个测试页面，其中包含一些测试以演示HTML5音频播放行为。请参阅此网页：http://webtests.online/LiveHTML5Audio.php

Answer 1

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

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

问题

问题

更新信息

测试页

1 个答案: