JavaScript中的音频循环

Question

I have an audio file that is 10 seconds long and I want to play it when user clicks on button. However when user holds the button down I want my audio to play on a loop from 5s to 7.5s and onmouseup I need my audio to play through the end(10s). Is it possible to do this without any external libraries?

Answer 1

So I created the following JS Fiddle that does the looping over 5-7.5 onmousedown . It works by keeping track of the currentTime property and checking to see if the player is in or out of bounds, resetting if outside bounds.

<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>