将addEventListener添加到所有按钮

debugcn 发表于 Dev

艾伦

好吧，这就是问题，我已经使用属性“ data-key”以这种方式将音频与按键进行匹配：

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);

现在，我想做同样的事情，但是点击底部。我已经尝试过，就像您可以在JavaScript片段的末尾看到的那样，为所有按钮添加了一个循环，但是看起来很尴尬，只能运行一个音频。

function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  if (!audio) return; // this stop the function from running all together.
  audio.currentTime = 0; // this rewind the audio to the start
  audio.play(key);
  key.classList.add("playing");
}

function removeTransition(e) {
  if (e.propertyName !== "transform") return; // skip it if it's not a transform
  this.classList.remove("playing");
}
const keys = document.querySelectorAll(".key");
keys.forEach((key) => key.addEventListener("transitionend", removeTransition));
document.addEventListener("keydown", playSound);

for (var i = 0; i < document.querySelectorAll(".beat").length; i++) {
  document.querySelectorAll(".beat")[i].addEventListener("click", function () {
    var clickAudio = new Audio(
      "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/22[kb]conga1.aif.mp3"
    );
    clickAudio.play();
  });
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Righteous&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Wallpoet&display=swap"
      rel="stylesheet"
    />

    <title>BEATS MACHINE</title>
  </head>
  <body>
    <div class="container-808">
      <div class="name-and-display-container">
        <div class="display">
          <span class="beats-controler">120.BPM</span>
        </div>
        <div class="name">
          <h1>Rhythm Designer</h1>
          <h3>RD-808</h3>
        </div>
      </div>
      <div class="keys-container">
        <button data-key="81" class="key beat first-row">
          <kbd>Q</kbd><span class="sound">CONGA</span>
        </button>
        <button data-key="87" class="key beat first-row">
          <kbd>W</kbd><span class="sound">HI HAT</span>
        </button>
        <button data-key="69" class="key beat first-row">
          <kbd>E</kbd><span class="sound">HAND CLAP</span>
        </button>
        <button data-key="82" class="key beat second-row">
          <kbd>R</kbd><span class="sound">HIGH TOM</span>
        </button>
        <button data-key="84" class="key beat second-row">
          <kbd>T</kbd><span class="sound">OPEN HIGH HAT</span>
        </button>
        <button data-key="89" class="key beat second-row">
          <kbd>Y</kbd><span class="sound">SNARE</span>
        </button>
        <button data-key="85" class="key beat third-row">
          <kbd>U</kbd><span class="sound">LOW CONGA</span>
        </button>
        <button data-key="73" class="key beat third-row">
          <kbd>I</kbd><span class="sound">CRASH</span>
        </button>
        <button data-key="79" class="key beat third-row">
          <kbd>O</kbd><span class="sound">TAMB</span>
        </button>

        <audio
          data-key="81"
          src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/22[kb]conga1.aif.mp3"
        ></audio>

        <audio
          data-key="87"
          src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/4[kb]cl_hihat.aif.mp3"
        ></audio>

        <audio
          data-key="69"
          src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/31[kb]handclap.aif.mp3"
        ></audio>

        <audio
          data-key="82"
          src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/17[kb]hightom.aif.mp3"
        ></audio>

        <audio
          data-key="84"
          src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/51[kb]open_hh.aif.mp3"
        ></audio>

        <audio
          data-key="89"
          src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/8[kb]snare.aif.mp3"
        ></audio>

        <audio
          data-key="85"
          src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/16[kb]80s-LOWCONGA.aif.mp3"
        ></audio>

        <audio
          data-key="73"
          src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/83[kb]80s-CRASH1.aif.mp3"
        ></audio>

        <audio
          data-key="79"
          src="https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/20[kb]80s-TAMB1.aif.mp3"
        ></audio>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

罗科·C·布尔扬

在您的特定情况下，我们不是机器，我们是程序员，而是使用useEvent.key或更确切地说，因为您想国际化键盘-使用Event.code-顺便说一句，我在QWERTZ键盘上，所以下面是应该适用于我的键盘，也适合您的键盘。
预加载您的声音！一旦我开始在键盘上打字或单击按钮后，您就不想加载声音！
以与播放声音相同的功能处理按钮样式！
不要肿HTML-使用JS！
path用您的声音路径创建一个字符串。
创建一个sounds包含最少已知数据的对象，就像一个库一样-每个键实际上都是一个键盘Event.code
使用音频onended事件从按钮中删除“正在播放”的CSS类

const path = "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/";
const sounds = {
  "KeyQ": {src:"808%20Basic/22[kb]conga1.aif.mp3", name:"CONGA"},
  "KeyW": {src:"808%20Basic/4[kb]cl_hihat.aif.mp3", name:"HI HAT"},
  "KeyE": {src:"808%20Basic/31[kb]handclap.aif.mp3", name:"HAND CLAP"},
  "KeyR": {src:"808%20Basic/17[kb]hightom.aif.mp3", name:"HIGH TOM"},
  "KeyT": {src:"808%20Basic/51[kb]open_hh.aif.mp3", name:"OPEN HIGH HAT"},
  "KeyY": {src:"808%20Basic/8[kb]snare.aif.mp3", name:"SNARE"},
  "KeyU": {src:"80s%20Drum%20Machine/16[kb]80s-LOWCONGA.aif.mp3", name:"LOW CONGA"},
  "KeyI": {src:"80s%20Drum%20Machine/83[kb]80s-CRASH1.aif.mp3", name:"CRASH"},
  "KeyO": {src:"80s%20Drum%20Machine/20[kb]80s-TAMB1.aif.mp3", name:"TAMB"},
};

const ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {});
const EL_keys = document.querySelector(".keys-container");
const keyBtn = (k) => ELNew("button", {
  classList: "key beat",
  type: "button",
  innerHTML: `<kbd>${k.replace("Key","")}</kbd><span class="sound">${sounds[k].name}</span>`,
  onmousedown: () => playSound(k)
});

// PRELOAD ALL SOUNDS. You dont' want loading delays, right?!
// Also... CREATE KEY BUTTONS as well.
Object.keys(sounds).forEach(k => {
  const soundObj = sounds[k];
  soundObj.audio = new Audio();
  soundObj.audio.src = path + soundObj.src;
  soundObj.audio.preload = true;
  soundObj.audio.load();
  soundObj.button = keyBtn(k); // Create button
  EL_keys.append(soundObj.button); // Append button
});

function playSound(k) {
  if (!(k in sounds)) return;
  const obj = sounds[k];
  obj.audio.currentTime = 0; // this rewind the audio to the start
  obj.audio.play();
  // Animate button:
  obj.button.classList.add("playing");
  obj.audio.addEventListener("ended", () => obj.button.classList.remove("playing"), {once: true});
}

document.addEventListener("keydown", (ev) => playSound(ev.code));

.key kbd { display: inline-block; text-transform: uppercase; padding: 0.5em; margin-right: 5px; }
.key { transition: 0.5s; }
.key.playing { box-shadow: 0 0 100px #0bf, inset 0 0 2em #0bf; }