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

当您播放带有循环选项true的声音时，您的代码所做的是，如果循环条件为true，则添加一个事件侦听器。您可能想要的是检查侦听器中的循环条件。

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

    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();
}