html5 音频：更改 currentTime 会触发多个 canplay 事件

Posted 2023-02-25

【中文标题】html5 音频：更改 currentTime 会触发多个 canplay 事件

【英文标题】：html5 audio: changing currentTime fires multiple canplay events

【发布时间】：2016-09-11 14:56:45

【问题描述】：

我需要更改 html5 音频元素的偏移时间。我编写了一个函数来处理 canplay 事件并更改 currentTime 属性。

但是，似乎更改 currentTime 属性会触发事件，因此它会循环进行。当我注释掉 currentTime 更改时，它可以正常工作（即事件只触发一次）。

正确的做法是什么？这种行为发生在（至少）Firefox 和 Chrome 中。结果音乐无法正常播放

<audio id="current" src="http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02.wav" controls 
start="1000" end="2000">    
</audio>
<script>

 $('audio').bind('canplay', function(event) 
     alert("fire!");
    event.target.currentTime = 0.5;
 );
 </script>

can check it on jsfiddle, too

实际上，它似乎与 loadedmetadata 事件一起工作，但每个人都认为 canplay 更好并且兼容更多浏览器

【问题讨论】：

您可以将.bind 更改为.one - 这样它只会触发一次。

@naortor 非常感谢您！现在可以使用了

【参考方案1】：

您可以使用 .one 代替 .bind 以便仅在第一次收听时使用

$('audio').one('canplay', function(event) 
    console.log("fire!");
    event.target.currentTime = 0.5;
);