Javascript switch, case, break 不工作

Question

我是 JS 的新手

我正在制作一個架子鼓網站並創建了一個開關部分，但它不起作用。

var numberOfDrumButtons = document.querySelectorAll(".drum").length;

for (var i = 0; i < numberOfDrumButtons; i++) {

  document.querySelectorAll(".drum")[i].addEventListener("click", function() {


    var buttonInnerHtml = this.innerHTML;

    switch (buttonInnerHtml) {
      case "w":
        var tom1 = new Audio('songs/oni-chan.mp3');
        tom1.play();
        break;

      case "a":
        var tom2 = new Audio('songs/oni-chan2.mp3');
        tom2.play();
        break;

      case "s":
        var tom3 = new Audio('songs/oni-chan3.mp3');
        tom3.play();
        break;
      default:
        break;
    }

  })
}    
    

HTML：

  <div class="set">
    <button class="w drum"><span>w</span></button>
    <button class="a drum"><span>a</span></button>
    <button class="s drum"><span>s</span></button>
    <button class="d drum"><span>d</span></button>
    <button class="j drum"><span>j</span></button>
    <button class="k drum"><span>k</span></button>
    <button class="l drum"><span>L</span></button>
  </div>

  <script src="index.js" href="UTF-8"></script>

Answer 1

來自音頻文檔（ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio#determining_when_playback_can_begin ）：

您可以通過三種方式判斷何時加載了足夠的音頻文件以允許開始播放：

• 檢查 readyState 屬性的值。 如果它是 HTMLMediaElement.HAVE_FUTURE_DATA，則有足夠的數據可用於開始播放並播放至少一小段時間。 如果它是 HTMLMediaElement.HAVE_ENOUGH_DATA，那么有足夠的可用數據，根據當前的下載速率，您應該能夠不間斷地播放音頻直到結束。

• 收聽 canplay 事件。 當有足夠的音頻可以開始播放時，它會被發送到元素，盡管可能會出現中斷。

• 監聽 canplaythrough 事件。 當估計音頻應該能夠不間斷地播放到最后時發送。 基於事件的方法是最好的：

myAudioElement.addEventListener("canplaythrough", event => {
  /* the audio is now playable; play it if permissions allow */
  myAudioElement.play();
});