Javascript：带按钮的循环声音。布尔值出错

Question

CSS

.btnMusic {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 50px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 130px;
  height: 130px;
  margin-bottom: 5px;
}    
.btnMusic:hover {
  background-color: darkgreen;
  cursor: pointer;
  border: 1px solid black;
}    
#options {
  margin-top: 20px;
}

JS

var boolean_loop = false;
var sound_highhat = new Audio("sound/sound_highhat.mp3");
var sound_lowhat = new Audio("sound/sound_lowhat.mp3");
var sound_synth = new Audio("sound/sound_synth.mp3");
var sound_beat = new Audio("sound/sound_beat.mp3");

function sound_loop() {
  if (boolean_loop === false) {
    document.getElementById("loopoption").innerHTML = "Loop (Active)";
    boolean_loop = true;
  } else if (boolean_loop === true) {
    document.getElementById("loopoption").innerHTML = "Loop";
    boolean_loop = false;
  }
}

function audiostop() {
  sound_highhat.pause()
  sound_highhat.currentTime = 0.0;
  sound_lowhat.pause()
  sound_lowhat.currentTime = 0.0;
  sound_synth.pause()
  sound_synth.currentTime = 0.0;
  sound_beat.pause()
  sound_beat.currentTime = 0.0;

}

function play_highhat() {
  if (boolean_loop === true) {
    sound_highhat.addEventListener("ended", function() {
      this.currentTime = 0;
      this.play();

    }, false);
    sound_highhat.play();
  } else if (boolean_loop === false) {
    sound_highhat.play();
  }
}

function play_lowhat() {
  if (boolean_loop === true) {
    sound_lowhat.addEventListener("ended", function() {
      this.currentTime = 0;
      this.play();
    }, false);
    sound_lowhat.play();
  } else {
    sound_lowhat.play();
  }
}

function play_synth() {
  if (boolean_loop === true) {
    sound_synth.addEventListener("ended", function() {
      this.currentTime = 0;
      this.play();
    }, false);
    sound_synth.play();
  } else {
    sound_synth.play();
  }
}

function play_beat() {
  if (boolean_loop === true) {
    sound_beat.addEventListener("ended", function() {
      this.currentTime = 0;
      this.play();
    }, false);
    sound_beat.play();
  } else {
    sound_beat.play();
  }
}

HTML

<div id="musicboard">
  <button class="btnMusic" onclick="play_highhat()">High Hat</button>
  <button class="btnMusic" onclick="play_lowhat()">Low Hat</button>
  <br>
  <button class="btnMusic" onclick="play_synth()">Synth</button>
  <button class="btnMusic" onclick="play_beat()">Beat</button>
</div>
<div id="options">
  <button id="loopoption" onclick="sound_loop()">Loop</button>
  <button onclick="audiostop()">Stop Music</button>
</div>

对于一项学校任务，我制作了一个带有4种声音的小音板。我还有一个触发布尔值的按钮来循环声音。循环工作正常，但每当我停止所有声音，如果我点击之前已经循环过一次的声音;无论布尔状态如何，它都会循环。

Answer 1

当您使用循环选项播放声音时，如果循环条件为真，则会添加一个事件侦听器。你可能想要的是检查你的监听器内的循环条件。

将侦听器添加到其中一个按钮的示例。

    sound_beat.addEventListener("ended", function() {
     if (boolean_loop === true) {
         this.currentTime = 0;
         this.play();
      }
    }, false);

因此，您的代码可能如下所示：

var boolean_loop = false;
var sound_highhat = new Audio("sound/sound_highhat.mp3");
var sound_lowhat = new Audio("sound/sound_lowhat.mp3");
var sound_synth = new Audio("sound/sound_synth.mp3");
var sound_beat = new Audio("sound/sound_beat.mp3");

function aListener = function() {
 if (boolean_loop === true) {
     this.currentTime = 0;
     this.play();
  }
};

// once you add listeners to the audio objects, those listeners stay there until they are removed so every "ended" event will trigger a listener
sound_highhat.addEventListener("ended", aListener, false);
sound_lowhat.addEventListener("ended", aListener, false);
sound_synth.addEventListener("ended", aListener, false);
sound_beat.addEventListener("ended", aListener, false);


function sound_loop() {
  if (boolean_loop === false) {
    document.getElementById("loopoption").innerHTML = "Loop (Active)";
    boolean_loop = true;
  } else if (boolean_loop === true) {
    document.getElementById("loopoption").innerHTML = "Loop";
    boolean_loop = false;
  }
}

function audiostop() {
  sound_highhat.pause()
  sound_highhat.currentTime = 0.0;
  sound_lowhat.pause()
  sound_lowhat.currentTime = 0.0;
  sound_synth.pause()
  sound_synth.currentTime = 0.0;
  sound_beat.pause()
  sound_beat.currentTime = 0.0;
}

function play_highhat() {
    sound_highhat.play();
}

function play_lowhat() {
    sound_lowhat.play();
}

function play_synth() {
    sound_synth.play();
}

function play_beat() {
    sound_beat.play();
}