当 HTML5 音频元素播放一定百分比时运行函数答案

【问题标题】：Run a function when an HTML5 Audio Element has played a certain %当 HTML5 音频元素播放一定百分比时运行函数
【发布时间】：2026-01-06 04:25:02
【问题描述】：

当一个 HTML5 Audio 元素播放了一定的量（例如 50%、80%）时，有什么方法可以运行预定义的函数？假设我知道文件的大小和其他任何内容。

<div class="audio-player" style="display:none;">
  <audio id="music" preload="auto">
    <source src="/path/to/my.mp3" type="audio/mp3">
  </audio>
</div>

我已经在使用 Javascript 来播放/暂停此音频。

function aud_play_pause(_id) {
  var audio = document.getElementById("music");
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
 }
}

假设我有一个函数 halfway() 来判断是否有人听了一半的歌曲，当曲目达到 50% 时，我有什么办法可以运行它吗？即使这是一个估计，那也没关系。我还想避免使用任何框架，因为我不需要任何额外的功能。

【问题讨论】：

标签： javascript html audio

【解决方案1】：

可能有更好的方法，但我可以看到您使用 HTML5 中媒体元素的“duration”和“currentTime”属性。未经测试，但这可能会让你陷入困境：

function check(){
  var duration = audioElement.duration;
  var currentTime = audioElement.currentTime;
  if( currentTime / duration >= 0.5 ){
    halfway()
  }
}

setInterval(check, 1000) //run this checker on an interval

【讨论】：

谢谢，利亚姆！这可行，但将在中点后的每一秒运行halfway() - 一个简单的修复！

【解决方案2】：

使用 setTimout 怎么样？

喜欢：

var relativeStopPosition = 0.5; // half-way
function aud_play_pause(_id) {
  var audio = document.getElementById("music");
  if (audio.paused) {
    audio.play();
    setTimeout(audio.pause.bind(audio), Date.now + relativeStopPosition * 1000* audio.duration ) ;
  } else {
    audio.pause();
 }
}

【讨论】：