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

【问题标题】：HTML5 Audio Buffer keeps increasing JS Heap sizeHTML5 音频缓冲区不断增加 JS 堆大小
【发布时间】：2017-10-07 02:57:07
【问题描述】：

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

通过分析内存使用情况，即使在垃圾回收之后，内存似乎也在不断增加。这是一个简单的 html 音频标签。没有运行 JS 逻辑。所以我确定缓冲区正在消耗内存。

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

我的问题是最终以这种累积速度，页面在内存不足时最终会崩溃，对吗？

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

【问题讨论】：

【解决方案1】：

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

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

这就是我的经验。您的可能因比特率、编解码器（不同的编解码器使用具有不同内存处理的不同库）和用户行为而异。试试看。

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

如果您想清除它，您可以完全删除音频标签并添加一个新标签。简单地更改 src 属性通常也可以，但在这种情况下您不会更改它，而是将其设置为相同的东西。

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

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

【讨论】：