Android 浏览器在每次 play() 后卸载 HTML5 音频元素，导致延迟

Posted 2023-02-25

【中文标题】Android 浏览器在每次 play() 后卸载 HTML5 音频元素，导致延迟

【英文标题】：Android browser unloads HTML5 audio element after each play(), causing delay

【发布时间】：2011-07-07 19:05:22

【问题描述】：

我有一个简单的应用程序，它通过在 javascript 中调用音频元素上的 play() 方法反复播放短声音。它在桌面浏览器、ipad、iphone 等上运行良好。在运行 android 2.3.3 的移动设备上，我第一次播放声音时，我在调用 play() 方法后立即听到，但在随后的调用中，有明显且可变的延迟。

我做了一些调查，发现每次调用 play() 方法时，设备都会从服务器获取音频文件。我可以在音频元素上调用 load() 方法以在每次播放后重新加载它，从而将其排队等待下一次播放，但该创可贴存在许多问题。我真的很想让浏览器永久加载音频元素，而不是在播放完毕后立即卸载它。有谁知道这是否可能？

编辑：我做了更多调查，我发现在播放声音后，音频元素的就绪状态保持在 HAVE_ENOUGH_DATA，即使浏览器不会再次播放该声音而不重新获取它服务器。我相信这是一个错误。我希望使用 readystate 来检测播放后卸载的浏览器，并且仅在必要时显式加载，但这不起作用。

【参考方案1】：

我做的实验越多，我在 Android 2.3.3 的 html5 音频标签实现中发现的边缘就越粗糙。那里有很多问题，至少在我用于测试的 Droid X 手机上。

到目前为止，我想出的最好的方法是我最初的问题中提到的创可贴：一旦 play() 调用完成，调用 load() 方法，为下一个 play() 做准备：

if (navigator.userAgent.toLowerCase().indexOf("android") > -1)
  audElt.addEventListener('ended', function () 
    var t = setTimeout(function ()  audElt.load(); , 1000);
  , false);

我不得不将解决方法限制为 Android 用户代理，因为简单地调用 load() 方法会在 Chrome 上产生问题，并在非 Android 系统上生成不必要的服务器访问。

我必须添加一个 1 秒的延迟，因为如果我只是从“结束”处理程序调用 load()，它会中断播放，显然，还没有真正“结束”......

当然，它仍然在重复从服务器获取声音，所以如果你尝试快速连续多次播放声音，事情很快就会向南。

【参考方案2】：

我找到的最佳解决方案。另一种选择是仅使用视频标签，但也存在一些问题。似乎没有什么可以很好地实施。

幸运的是我正在使用电话间隙，所以我会试一试他们的音频方法。

【参考方案3】：

您可以将updatetime 绑定到pause() 播放，然后再播放到音频的结尾，然后在再次播放之前倒回。 Android 将不会刷新音频。