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

Posted 2023-02-25

【中文标题】当 HTML5 音频元素播放一定百分比时运行函数

【英文标题】：Run a function when an HTML5 Audio Element has played a certain %

【发布时间】：2014-12-25 20:15:11

【问题描述】：

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

【参考方案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();