Question

对于我的音频项目，我需要创建一个循环功能。对于此示例，循环时间为3秒至8秒。

我期望的结果

在8秒标记之前单击loop-icon时，我希望一旦经过8秒标记，音频将无限期开始循环播放。

在8秒标记后单击loop-icon时，音频应立即无限循环3至8秒。

第二次单击loop-icon时，循环停止，音频继续照常播放。

正在发生的事情

在8秒标记之前单击loop-icon时，音频会像往常一样播放，并且在经过8秒标记后不再执行循环。

在8秒标记后单击loop-icon会导致循环，但只会循环一次，并且音频会像往常一样播放而不会第二次循环。

第二次单击loop-icon时，与上述问题相同。

const audio = document.querySelector('.audio');
const loopIcon = document.querySelector('.loop-icon');

let loopOn = false;

loopIcon.addEventListener('click', function() {

  if (loopOn === false) {
    loopOn = true;
    audio.addEventListener('timeupdate', timeLoop());
  } else {
    loopOn = false;
    audio.removeEventListener('timeupdate', timeLoop());
  }
});

function timeLoop() {
  if (audio.currentTime >= 8) {
    audio.currentTime = 3;
  }
}

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

<i class="fas fa-redo-alt loop-icon"></i>
<audio class="audio" src="https://radio.pastemagazine.com/audio/320/2146615065.mp3" controls>
</audio>

用Java循环音频

0 个答案: