javascript - 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 崩溃之前断开他们的连接。

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

Are there any best practices like stoping and re-playing to clear out the buffer?

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

I don't think there's a way to tinker with the buffer memory for HTML5 Audio.

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