Javascript 开关、大小写、中断不起作用答案

【问题标题】：Javascript switch, case, break doesn't workJavascript 开关、大小写、中断不起作用
【发布时间】：2022-02-11 00:43:12
【问题描述】：

我是 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>

【问题讨论】：

“它不工作”到底是什么意思？ 任何事情会发生吗？是否报告了错误？
当我点击按钮时，它应该播放音频
OK.... 它的实际作用是什么？
现在什么都没有
第一个按钮的innerHTML 将是"<span>w</span>"，而不是"w"。请改用textContent。

标签： javascript html

【解决方案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();
});

【讨论】：