JavaScript 中的音频循环

【问题标题】：Audio looping in JavaScriptJavaScript 中的音频循环
【发布时间】：2019-01-25 09:07:03
【问题描述】：

我有一个 10 秒长的音频文件，我想在用户单击按钮时播放它。但是，当用户按住按钮时，我希望我的音频从 5 秒到 7.5 秒循环播放，onmouseup 我需要我的音频播放到最后（10 秒）。是否可以在没有任何外部库的情况下做到这一点？

【问题讨论】：

创建另一个音频文件或 2 可能是最好的主意。然后在音频标签上添加一些最小的 JavaScript 和循环属性。

标签： javascript html5-audio javascript-audio-api

【解决方案1】：

所以我创建了以下 JS Fiddle 来循环 5-7.5 onmousedown。它的工作原理是跟踪currentTime 属性并检查玩家是否在界内或界外，如果在界外则重置。

<button onclick="playSound()">play</button>
<button onmousedown="fivetoseven()">play 5-7</button>
<button onclick="stopSound()">stop</button>
<audio controls id="mp3" preload="auto" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Toreador_song_cleaned.ogg"></audio>


<script>
  var mp3 = document.getElementById('mp3');

  function playSound() {
    mp3.play();
  }

  function fivetoseven() {
    if (mp3.currentTime < 5.0 || mp3.currentTime > 7.5) {
      mp3.currentTime = 5;
    }
    setTimeout(fivetoseven, 500)
  }


  function stopSound() {
    mp3.pause();
  }

</script>

【讨论】：