HTML5 音频开始播放延迟

Posted 2023-02-25

【中文标题】HTML5 音频开始播放延迟

【英文标题】：HTML5 audio start playing delay

【发布时间】：2014-04-25 11:19:42

【问题描述】：

我当前的 MP3 音频播放实现效果很好，但是在 android 设备上的 Chrome 中，在触发“canplay”事件（启动可视播放进度条）和通过设备。这会导致视觉进度条稍微不同步。

有没有比使用“canplay”更可靠的方法来检测音频播放何时开始？ 我的逻辑如下：

var audio = new Audio();
audio.src = 'something.mp3';
audio.play();
audio.addEventListener('canplay', function() 
    // audio playback commences now.
    // start progress bar animation.
);

【参考方案1】：

您可以使用 timeupdate 事件来验证播放的当前时间。这是来自 MDN 文档的 sn-p

timeupdate元素的currentTime属性指示的时间发生了变化。

参考：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

【讨论】：

playing 事件在通过设备实际播放之前触发。这可能会延迟几秒钟！

@user3554382 您可能想要更改逻辑以使用 timeupdate 事件。使用 timeupdate 移动进度条？

使用timeupdate 事件并验证currentTime 是否大于0 似乎是检测音频播放实际发生时间的最准确方法。谢谢！

我也在 ionic 中使用 timeupdate 事件，但它滞后于音频任何解决方案？