如何使用JavaScript实现点击图片播放音效？鼓网站项目代码疑问求助

嘿，我来帮你搞定这个点击图片播放音效的问题！要实现点击不同图片触发对应音效，核心是给每个图片元素加上可识别的标识，然后在点击事件里获取这个标识来匹配对应的音频。下面是具体的修改方案：

第一步：给图片元素添加自定义数据属性 #

首先，你需要给每个带有soundi类的图片标签，添加一个data-sound属性，用来标记它对应的音效文件名。比如：

<img class="soundi" data-sound="tom-1" src="tom1-image.png" alt="Tom 1">
<img class="soundi" data-sound="tom-2" src="tom2-image.png" alt="Tom 2">
<!-- 其他鼓的图片同理 -->

第二步：修改JavaScript代码中的YYYY部分 #

现在回到你的JS代码，两个YYYY的位置需要这样替换：

1. 第一个YYYY：我们需要获取当前点击图片的data-sound属性值，用this.dataset.sound（这是HTML5标准的数据集API，简洁又直观），或者也可以用this.getAttribute('data-sound')。
2. 第二个YYYY：就是你在data-sound里设置的对应值，比如"tom-1"。

修改后的完整代码如下：

var soundiCount = document.querySelectorAll(".soundi").length; 
for (var i = 0; i < soundiCount ; i++) { 
  document.querySelectorAll(".soundi")[i].addEventListener("click", function () { 
    var soundKey = this.dataset.sound; // 第一个YYYY替换成dataset.sound
    switch (soundKey) { 
      case "tom-1" : // 第二个YYYY替换成对应的data-sound值
        var tom1 = new Audio('sounds/tom-1.mp3'); 
        tom1.play(); 
        break;
      case "tom-2" : // 可以继续添加其他音效的case
        var tom2 = new Audio('sounds/tom-2.mp3'); 
        tom2.play(); 
        break;
      // 其他鼓的音效case同理
    } 
  }) 
}

额外优化小提示 #

• 把document.querySelectorAll(".soundi")存成变量，避免循环里重复查询DOM，性能更好：

  var soundElements = document.querySelectorAll(".soundi");
  for (var i = 0; i < soundElements.length ; i++) { 
    soundElements[i].addEventListener("click", function () { 
      // 后续代码不变
    }) 
  }
  

• 可以把音频文件路径和data-sound的对应关系做成一个对象，减少switch的冗余代码，比如：

  const soundMap = {
    "tom-1": "sounds/tom-1.mp3",
    "tom-2": "sounds/tom-2.mp3",
    // 其他音效映射
  };
  
  // 点击事件里直接用：
  var soundKey = this.dataset.sound;
  if (soundMap[soundKey]) {
    new Audio(soundMap[soundKey]).play();
  }
  

内容的提问来源于stack exchange，提问作者ouhoy