点击事件后如何为不同的按钮分配不同的音频-解网

问：

  <h1 id="title">Drum 🥁 Kit</h1>
  <div class="set">
    <button class="w drum">w</button>
    <button class="a drum">a</button>
    <button class="s drum">s</button>
    <button class="d drum">d</button>
    <button class="j drum">j</button>
    <button class="k drum">k</button>
    <button class="l drum">l</button>
  </div>

var tekan = document.querySelectorAll(".drum");

tekan.forEach(drum => {
drum.addEventListener("click", play);
})

function play() {
// const sound = ["crash.mp3", "kick.mp3", "snare.mp3", "tom1.mp3", "tom2.mp3", "tom3.mp3", "tom4.mp3"];

var audio = new Audio('sounds/crash.mp3');
audio.play();  
};

当我单击每个按钮时，它只会播放崩溃.mp3音频，如何为每个按钮分配不同的音频，例如常量声音中的音频？

我尝试使用关键字，以便它更改音频文件源（/crash.mp3）this

var audio = new Audio('sounds/crash.mp3');

根据点击的按钮。我想我对关键词的了解还很模糊，或者除此之外还有什么办法吗？如果我只能用于此，那就太好了。thisJavascript

JavaScript foreach 单击此 addEventListener

const tekan = document.querySelectorAll(".drum");

tekan.forEach(drum => {
  drum.addEventListener("click", play);
})

const drumSoundFiles = {
  "w": "crash.mp3", 
  "a": "kick.mp3", 
  "s": "snare.mp3",
  "d": "tom1.mp3", 
  "j": "tom2.mp3",
  "k": "tom3.mp3",
  "l": "tom4.mp3"
}

function play(event) {
  const pressedKey = event.target.classList[0]
  const soundFile = drumSoundFiles[pressedKey]

  const audio = new Audio(`sounds/${soundFile}`)
  audio.play()
};

请记住将对象中的每个键映射到正确的声音。drumSoundFiles

0赞 sandeep-prabhakula 11/3/2023 #2

当然！为此，可以将与每个按钮关联的音频文件位置作为 HTML 中的数据属性包含在 HTML 中，然后在 JavaScript 代码中访问此数据属性。以下是修改 HTML 和 JavaScript 以实现此目的的方法：

<h1 id="title">Drum 🥁 Kit</h1>
<div class="set">
    <button class="w drum" data-sound="crash.mp3">w</button>
    <button class="a drum" data-sound="kick.mp3">a</button>
    <button class="s drum" data-sound="snare.mp3">s</button>
    <button class="d drum" data-sound="tom1.mp3">d</button>
    <button class="j drum" data-sound="tom2.mp3">j</button>
    <button class="k drum" data-sound="tom3.mp3">k</button>
    <button class="l drum" data-sound="tom4.mp3">l</button>
</div>

此修改后的 HTML 中的每个按钮都包含一个 data-sound 属性，用于标识要播放的音频文件。

var tekan = document.querySelectorAll(".drum");

tekan.forEach(drum => {
    drum.addEventListener("click", play);
});

function play() {
    var soundFile = this.getAttribute("data-sound");
    var audio = new Audio('sounds/' + soundFile);
    audio.play();
}

这是指在播放函数中单击的按钮元素。您可以使用 this.getAttribute（“data-sound”）访问与单击的按钮关联的 data-sound 属性的值。然后，使用此值构造匹配音频文件的路径，并生成并播放 Audio 对象。

因此，根据 HTML 中提供的 data-sound 属性值，每个按钮将播放不同的音频文件。

上一个：reactjs- 一个自定义函数，它作为 prop 传递到一个组件中，该组件在 map 函数中不起作用

下一个：对象文本和对象文本方法的执行上下文

点击事件后如何为不同的按钮分配不同的音频

How to assign different audio to different buttons after clicked event

评论