节拍器 JavaScript - 函数 .pause() 不停止音频提示音

Question

我想在 Codepen 上做一个节拍器。但是我有一个问题，因为函数 .pause() 不会停止哔哔声（我的声音）。这是我写的代码。我读到了它，但我没有发现问题。

我在 Codepen 上找到的音频。我不认为这是问题所在。我认为问题出在我的电脑和椅子之间。

     const beep = new Audio(
    "data:audio/flac;base64,ZkxhQwAAACIQABAAAARBAARBAfQBcAAAAZLfwZb9QVlTtnnZLOsaWczxhAAAKCAAAAByZWZlcmVuY2UgbGliRkxBQyAxLjMuMCAyMDEzMDUyNgAAAAD/+HQMAAGRJhgKxHRX63x+6QxXqTpCYAANDJgITNAmIhAB/5BgFt4iAfgBZHY4A9UZAAZ65QManTnQUAKnx8A+ZcwFun6gX1gMVIgAfaXgEml9KIzgfUBYAnhLwJl/Oek+A5rZADhx2ApN3s198CTrfAPyHMGRV3DcKAYAAwBJ7uA8wysUF8HYV6AUyIIKv/ObD0B7BRAOf6QFVnlVIrg0zuwGYTqCTP9rJXAWm4AC1HQDxVMnllwVg94CGPDDq6XrJRgQ2zwHp6wGR5tQFGh9dygZtwIXeHNK+AHAw8BZ34BSgBUY44Ze3IEt2uEhBfQg3BcaTA+MSB/rIUTNIUTWYN9hMdT2M/TYEg+cDC6KGzFJQAzj8TBBUujjHFLnsqB07TAj7JBa4qTwQY15pQ9rKxSdhzrJwxaKA3o/BKIsTkDYtGCwxtDRCIqzegQo2pAr9KD0mKmwtRJeuhMscnKzjNLLCC4CCDoYNaPiZmNPNIsdzTJkF0zHIRyDGDZzCLozKYLfNVZUYt6pWUiy7/Bjf5CyRUJ95iW1TLkIET7MJJU5yxARVwzCNBsIZHCVflJ5ZE+0K30dXKabEjNYdP+TulglDBSFPJNlCtxqLycmj5OeMkURsMFSXgrtnXLllFm5cySbjiZQKoshh0ASOArXdBJuJ9c2syJBjM8II1VJYFtSEVbCw3f80qnABkAClxxw8mPk8NdHt4q9gNy0UpWEuO2UUx3jZSuRqVkcoWnWIWa1ahV3Y3K5KbKMH879vqjUtUZMatwgfZeOMvsQlyisbQ71rIxGX9FhUSYvRHvF3xeunSYfQ4iRItSvuvzR5iO3xDFaEdARSGOC1fGIpY/hll/Z8dBI+J6u22KvVuDK2IiXW9V8Htkhxa94kLDPz25hsMC8qImvymxd70W8D5iDfsU9TYMYt5EIfJnAWr0bS7NbeHbQu6ZsuZyvTuhwMbc9XFv3q4b4amazBWwDvKfuyGSBrwrbr8+kkvhfZKs7C2FwoVooWXOnr/sWmZ5hWFSSpEtq0O6bjQhPR6Eguo8PmOz4SoKeIgpRmJZ1CEWpm1U6F/2UKJhBBJi0KeJ6kgEoPCeWSBmv85AOeDhOk/mJgciON6g0DZHbeVa7jIhYMBSP4ukvNIr36CvTjhkZCkWJk5godIxpiOjqiEnoJQ2K3HjKtYcY2CFWiXpIrqaGEIgef4gs+JXnhRm4GziHB2h/OIRB6BgfhgH4ap2DiTgVwIUN6FjaguFoE0uENThJRYJMOBCwg3zIOyKB00gOl4LXWC79gW14DOaCQAglUoEKCApZgc1YHC2AxzgJBoFcSBWWgICoBp+BEXgO64BeGAXYgMGoCoCAOYgEk4CGWAb5gB54A2SAWGgEfoAHyAINgDuYAkeAAbgBfoAgyAEEgAC4ARGADPgAf4AFyABYgAeIACGAAMgAaYAECABJgAagfd0="
  );

const bpm = document.getElementById('bpm-display');
const time = document.getElementById('time');
const timeSlice = document.getElementById('time-slice');
const rangeBpm = document.getElementById('bpm-range');
const btnStartStop = document.getElementById('start-stop');
const btnReset = document.getElementById('reset');
let intervalSound


// function to start and stop the metronome
const startMetronome = (() => {
    btnStartStop.innerText==='Start'?   btnStartStop.innerText= 'Stop': btnStartStop.innerText='Start';
  if(btnStartStop.innerText === 'Stop'){
      intervalSound = (60/bpm.value) * 1000;
    console.log(intervalSound);
      interval(intervalSound);
  }
  else{
    stopBeat();
  }
});

const stopBeat = (()=>{
  beep.pause();
  beep.currentTime = 0;
})

const playBeat = (() =>{
  beep.play();
})

const interval = ((interval) => {
  setInterval(playBeat, interval)
})

// function to reset all metronome
const resetMetronome = (()=>{
  bpm.value = '120';
  rangeBpm.value='120';
  time.value='4';
  timeSlice.value='4';
  intervalSound = 0;
  stopBeat();
});

btnReset.addEventListener('click', function(){resetMetronome()});
btnStartStop.addEventListener('click', function(){startMetronome()});

bpm.addEventListener('change', function(){
  rangeBpm.value=bpm.value;
})
rangeBpm.addEventListener('click', function(){
  bpm.value = rangeBpm.value;
})

console.log(bpm.value, time.value, timeSlice.value, rangeBpm.value, btnStartStop.innerText, btnReset.innerText);

你能帮帮我吗？

Answer 1

您需要清除间隔。

let intervalId = -1;

const stopBeat = (()=>{
  beep.pause();
  beep.currentTime = 0;
  clearInterval(intervalId);
})

const interval = ((interval) => {
  intervalId = setInterval(playBeat, interval)
})

节拍器 JavaScript - 函数 .pause() 不停止音频提示音

Metronome JavaScript - function .pause() don't stop the Audio beep

javascript

playback

pause

metronome