javascript - 如何点击播放多音频文件

Question

谁能告诉我点击时如何播放音频<div>？
此代码同时播放所有音频。

let containerItem = document.querySelectorAll('.container__item');
  let audio = document.querySelectorAll('.audio');
  containerItem.forEach((a)=>a.addEventListener('click',playAudio));
  function playAudio(){
  audio.forEach((a)=>a.play());
}

<div class="container__item">
  <audio class="audio" src="cry.mp3"></audio>
</div>

<div class="container__item">
  <audio class="audio" src="dance.mp3"></audio>
</div>

标签： javascripthtmlcss

Answer 1

该playAudio()功能适用.play()​​于每个音频元素。
使用函数的this关键字来选择被点击的元素并.audio使用 querySelector 开始它的音频，只选择它的子元素（元素）。

function playAudio() {
  this.querySelector('.audio').play();
}