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

Run a function when an HTML5 Audio Element has played a certain %

本文关键字：百分比 运行 函数 放了 HTML5 音频 元素 播放      更新时间：2023-09-26

当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% 时，有什么方法可以运行它吗？即使这是一个估计，也没关系。我还想避免使用任何框架，因为我不需要任何额外的功能。

可能有更好的方法，但我可以看到你在HTML5中使用媒体元素的"持续时间"和"当前时间"属性。未经测试，但这可能会让您陷入困境：

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

使用 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();
 }
}
相关文章：