如何将音频添加到多个 div 元素？ //虚拟鼓组

问题描述

Wesbos 挑战 - 架子鼓。

我正在扩展我的代码，这样当您点击每个 div 时，audio 就会播放。 A screenshot of what the kit looks like

当我用 [playKeyAudio()] 键演奏时，相关的音频会播放，所以这个位有效。但是我添加了额外的功能来监听 'click' 事件。

如何向所有 'click' 元素添加 div 事件侦听器，以便在单击它们时播放与相同数据键关联的相应音频？我已经定义了一个 playClickAudio() 函数，但现在它只播放所有 div 的第一个音频文件（crash cymbal）。

function playKeyAudio(event) {
  const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
  const instrument = document.querySelector(`.instrument[data-key="${event.keyCode}"]`)
  console.log(instrument)
  if (!audio) {
    return
  }
  audio.play()
  audio.currentTime = 0
  instrument.classList.add('play')
}

function playClickAudio() {
  const audio = document.querySelector('audio')
  if (!audio) {
    return
  }
  audio.play()
  audio.currentTime = 0
  this.classList.add('play')
}

function removeTransition(e) {
  if (e.propertyName !== 'transform') {
    return
  }
  console.log(this)
  this.classList.remove('play')
}

const instruments = document.querySelectorAll('.instrument')
instruments.forEach(x => x.addEventListener('click',playClickAudio))
instruments.forEach(x => x.addEventListener('transitionend',removeTransition))
window.addEventListener('keydown',playKeyAudio)

.kit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  height: 100vh;
}

.kit>div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

kbd {
  font: 400 30px/120% 'Crimson Pro',serif;
  background-color: #222222;
}

.instrument {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 10em;
  height: 10em;
  margin-top: 1em;
  font: 400 16px/120% "Rubik",sans-serif;
  border: 3px solid #314569;
  color: #ffffff;
  text-transform: capitalize;
  text-align: center;
  cursor: pointer;
  transition: all 0.07s;
  /* flex-basis: 25%; */
  background: rgba(0,0.4);
}

.instrument:not(.hi-hat,.crash-cymbal) {
  margin-left: 1em;
}

.play {
  transform: scale(1.1);
  border: 3px solid #7aa7fa;
  Box-shadow: 0 0 5px #95baff;
}

<section class="kit-container">

  <div class="kit">
    <div>
      <div data-key="65" class="instrument crash-cymbal"><kbd>A</kbd>crash cymbal</div>
      <div data-key="83" class="instrument small-tomtom"><kbd>S</kbd>small tomtom</div>
      <div data-key="68" class="instrument large-tomtom"><kbd>D</kbd>large tomtom</div>
      <div data-key="70" class="instrument ride-cymbal"><kbd>F</kbd>ride cymbal</div>
    </div>
    <div>
      <div data-key="86" class="instrument hi-hat"><kbd>V</kbd>hi hat</div>
      <div data-key="66" class="instrument snare-drum"><kbd>B</kbd>snare drum</div>
      <div data-key="78" class="instrument bass-drum"><kbd>N</kbd>bass drum</div>
      <div data-key="77" class="instrument floor-tom"><kbd>M</kbd>floor tom</div>
    </div>
  </div>
</section>

<!-- sounds -->
<audio data-key="65" src="sounds/crash-single-hit-a-key-02.wav"></audio>
<audio data-key="83" src="sounds/low-tom-drum-single-hit-c-key-13.wav"></audio>
<audio data-key="68" src="sounds/hi-tom-key-05.wav"></audio>
<audio data-key="70" src="sounds/ride-sample-b-key-07.wav"></audio>
<audio data-key="86" src="sounds/hi-hat-key-02.wav"></audio>
<audio data-key="66" src="sounds/snare-drum-sound-a-key-01.wav"></audio>
<audio data-key="78" src="sounds/bass-drum-key-103.wav"></audio>
<audio data-key="77" src="sounds/floor-tom-key-13.wav"></audio>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）