HTML5音频缓冲区不断增加JS堆大小

Question

我正在使用html5音频对象来播放播客。请注意，这是一个很长的播客（~2小时）。

通过分析内存使用情况，即使收集了垃圾，内存也会持续上升。这是简单的html音频标签。没有JS逻辑在运行。所以我确定缓冲区消耗了内存。

<audio controls="controls">
   <source src="http://eu8.fastcast4u.com:5000/;"/>
</audio>

https://jsfiddle.net/henryw4k/mquumgex/1/

我的问题最终是在这种累积速度下，当内存耗尽时页面最终会崩溃，这是正确的吗？

如何限制/重置此内存累积？是否有任何最佳实践，如停止和重新播放以清除缓冲区？我认为没有办法修改HTML5音频的缓冲存储器。

Answer 1

这不是播客，这是一个无限期运行的SHOUTcast流。

Chrome在SHOUTcast / Icecast流方面相当不错。您可以安全地在音频标签中运行它们。大多数机器都有足够的内存，当浏览器崩溃时，您的用户无论如何都会停止收听。即使您确实有听众可以听几天，通常网络连接问题也会在Chrome崩溃之前断开连接。

无论如何，这是我的经历。您的可能会因比特率，编解码器（不同的编解码器使用具有不同内存处理的不同库）和用户行为而有所不同。试试吧，看看。

  

是否有最佳做法，例如停止和重新播放以清除缓冲区？

如果要清除它，可以完全删除音频标签并添加新标签。简单地更改src属性通常也可以正常工作，但在这种情况下你不会改变它，你可以将它设置为相同的东西。

  

我认为没有办法修改HTML5音频的缓冲存储器。

啊，但是有！ MediaSource Extensions。您可以通过任何您喜欢的方式（例如Fetch API）请求数据，并将数据推送到缓冲区以供浏览器解码。该数据不会在需要时保留在内存中，因此会消除因内存过度使用而导致崩溃的可能性。不幸的是，SHOUTcast不支持这个服务器端，所以这不是你的选择。