问题：this.id无法传递至函数，无法通过Div ID调用音频变量播放声音

我明白你现在的困扰——点击.pad元素时能正确打印出ID，但就是没法触发音频播放。问题出在这一行：target.play()。这里的target是字符串类型的元素ID（比如"kick"），而不是你之前创建的Howl实例对象，字符串根本没有play()方法，自然执行不了。

解决方案：用对象映射ID到音频实例 #

我们可以创建一个对象，把元素ID和对应的Howl实例关联起来，这样点击时就能通过ID快速找到对应的音频对象并调用播放方法了。

修改后的完整代码如下：

JavaScript

// 创建音频实例映射对象
const sounds = {
  kick: new Howl({ src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV'] })
};

$(".pad").click(function(e){
  const targetId = this.id;
  console.log(targetId);
  // 从映射对象中取出对应音频实例并播放
  if (sounds[targetId]) {
    sounds[targetId].play();
  } else {
    console.warn(`没有找到ID为${targetId}的音频实例`);
  }
});

CSS

.pad {
  position: relative;
  display: inline-block;
  margin: auto;
  height: 40px;
  width: 55px;
  background: #594F4D;
  box-shadow: 1px 1px 1px grey;
  border-radius: 5px;
  padding: 1px;
  cursor: pointer; /* 加上鼠标指针提示，提升交互体验 */
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.12/howler.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pad" id="kick"></div>

为什么这样能行？ #

1. 我们用sounds对象把ID字符串和实际的Howl实例绑定在一起，比如sounds['kick']就直接指向你创建的kick音频实例。
2. 点击元素时，通过this.id拿到ID字符串，再用这个字符串作为键从sounds对象里取出对应的音频实例，就能正常调用play()方法了。
3. 加上if (sounds[targetId])的判断，能避免因为ID不匹配导致的报错，让代码更健壮。

如果之后要添加更多音频，只需要在sounds对象里新增键值对，再添加对应ID的.pad元素就可以了，扩展性很强。

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