使用 jQuery 确定 HTML5 音频何时暂停或曲目何时结束

Posted 2023-02-25

【中文标题】使用 jQuery 确定 HTML5 音频何时暂停或曲目何时结束

【英文标题】：Determine when HTML5 audio is paused or track is finished using jQuery

【发布时间】：2011-10-04 17:54:57

【问题描述】：

我正在处理 html5 音频标签，我想在歌曲完成时触发一个事件。 jQuery可以做到这一点吗？

我的 jQuery 代码是：

      $(document).ready(function()

var music = new Audio("sample.mp3");
$('#play').click(function()
    music.play();
);

$('#pause').click(function()
 music.pause();
);

         );

我的 HTML5 是：

<input type="button" value="Play" id="play" />
<input type="button" value="Pause" id=pause" />

【问题讨论】：

相关：Need to trigger an event on a video ending

【参考方案1】：

使用 HTML 5 onended 事件处理程序

<audio src="sample.mp3" onended="yourFunction()"></audio>

对于 jQuery 绑定 ended 事件处理程序

 $(music).bind("ended", function() ... );

【讨论】：

谢谢回复其实我想通过jquery触发它怎么可能用jquery？

用于 jQuery 绑定结束事件处理程序。比如$(music).bind("ended", function() ... );

@danny 你用的是什么浏览器？

我刚刚测试了 $(music).bind("end", function() ... );它工作正常，我正在使用 chrome。我已经替换了代码 music.addEventListener("ended", function() ); to $(music).bind("end", function() alert('fired'););非常感谢。

Emmanule 如果您编辑您的回复并添加音频状态功能等文件被暂停或停止等它会帮助很多人。

【参考方案2】：

.bind("ended", function() );

或者

 music.addEventListener("ended", function()  );

【讨论】：

感谢您的回复，但它不起作用。我不知道我用过 music.bind("ended, function());

music.addEventListener("end", function() );运行良好

【参考方案3】：

<audio class="ah-audio-player" preload="auto">
  <source type="audio/mpeg" src="sound.mp3">
</audio>

-

var audio_player = $('.ah-audio-player');
audio_player.on('ended', function () 
    alert('end');
);

【讨论】：

请详细说明此答案如何回答已发布的问题