Safari 桌面上的音频延迟
Audio delay on Safari Desktop
我有一个包含多个 <audio> 标签的页面。每当我在 Chrome（桌面，macOS）中播放音频时，它会立即开始，而在 Safari（13.1，macOS）中它会等待一段时间才能开始播放（奇怪的是，如果它们是几个，它会等待更长时间页面上的音频标签）。
我认为问题出在未设置“preload”属性，因此我根据文档将其设置为“auto”]1，但它并没有改变任何事情。
我不想使用第 3 方库以保持尽可能简单。
如何消除这种延迟？为什么页面上的音频标签越多越长？
我无法完全消除延迟，但我通过将 preload 设置为 ="metadata" 使它变得更好。出于某种原因，它使文件加载速度更快。
Chrome 其实在这方面很聪明。当预加载设置为自动时，它会在页面加载时缓存大约 1mb 的每个音频文件，因此当您按下“播放”按钮时它可以更快地播放。
我也开始监听 audio 元素的 onwaiting 事件，所以我可以显示预加载器来改善体验。
由于 Safari 在文件实际准备好播放时会更快地触发 oncanplay 和 onplaying，因此我不只是隐藏此事件的预加载器，而是在 1.5 秒超时后使其平滑出。
这对我来说已经足够了，因为延迟从 30 秒（页面上有 10 个音频元素）减少到仅 1.5 秒。
我有一个包含多个 <audio> 标签的页面。每当我在 Chrome（桌面，macOS）中播放音频时，它会立即开始，而在 Safari（13.1，macOS）中它会等待一段时间才能开始播放（奇怪的是，如果它们是几个，它会等待更长时间页面上的音频标签）。
我认为问题出在未设置“preload”属性，因此我根据文档将其设置为“auto”]1，但它并没有改变任何事情。
我不想使用第 3 方库以保持尽可能简单。
如何消除这种延迟？为什么页面上的音频标签越多越长？
我无法完全消除延迟，但我通过将 preload 设置为 ="metadata" 使它变得更好。出于某种原因，它使文件加载速度更快。
Chrome 其实在这方面很聪明。当预加载设置为自动时，它会在页面加载时缓存大约 1mb 的每个音频文件，因此当您按下“播放”按钮时它可以更快地播放。
我也开始监听 audio 元素的 onwaiting 事件，所以我可以显示预加载器来改善体验。
由于 Safari 在文件实际准备好播放时会更快地触发 oncanplay 和 onplaying，因此我不只是隐藏此事件的预加载器，而是在 1.5 秒超时后使其平滑出。
这对我来说已经足够了，因为延迟从 30 秒（页面上有 10 个音频元素）减少到仅 1.5 秒。