Question

当HTML5音频元素播放了一定数量（例如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％时，有什么方法可以运行吗？即使这是一个估计，那也没关系。我还想避免使用任何框架，因为我不需要任何其他功能。

Answer 1

可能有更好的方法，但我可以看到你使用＆＃34;持续时间＆＃34;和＆＃34; currentTime＆＃34; 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

Answer 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();
 }
}

当HTML5音频元素播放了一定的％时运行一个函数

2 个答案: