Как проигрывать мульти-аудио файлы по клику

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>

Answer 1

Функция playAudio() применяет .play() к каждому аудиоэлементу.
Используйте ключевое слово this функции, чтобы выбрать элемент, по которому щелкнули, и начать его аудио, выбирая только его дочерний элемент (.audio), используя querySelector.

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

Answer 2

Поскольку вы добавили событие нажатия для каждого containerElement, а не для каждого аудиоэлемента, вам нужно изменить playAudio функцию на

function playAudio(){
  this.children[0].play();
}

, или вы можете сделать это следующим образом

document.querySelector("#container").onclick = function(e) {
  if(e.target.nodeName === "I") {
    var button = e.target, audio = e.target.nextElementSibling;
    if(audio.paused) {
      audio.play();
      button.className = "fa fa-pause-circle-o";
    }else {
      audio.pause();
      button.className = "fa fa-play-circle-o";
    }
  }
}

* {
  box-sizing: border-box;
}
#container {
  display: flex;
  width: 300px;
  background-color: lightgreen;
  border-radius: 15px;
  box-shadow: 1px 1px 2px #555;
}
.container__item {
  width: 60px;
  height: 50px;
  border-radius: 40%;
  background-color: #ccc;
  box-shadow: 0 0 50px 15px #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
}
.container__item i {
  font-size: 35px;
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="container">
  <div class="container__item">
    <i class="fa fa-play-circle-o"></i>
    <audio class="audio" src="http://soundbible.com/grab.php?id=1858&type=mp3" onended="this.previousElementSibling.className = 'fa fa-play-circle-o'"></audio>
  </div>

  <div class="container__item">
    <i class="fa fa-play-circle-o"></i>
    <audio class="audio" src="http://soundbible.com/grab.php?id=1858&type=mp3" onended="this.previousElementSibling.className = 'fa fa-play-circle-o'"></audio>
  </div>

  <div class="container__item">
    <i class="fa fa-play-circle-o"></i>
    <audio class="audio" src="http://soundbible.com/grab.php?id=1858&type=mp3" onended="this.previousElementSibling.className = 'fa fa-play-circle-o'"></audio>
  </div>

  <div class="container__item">
    <i class="fa fa-play-circle-o"></i>
    <audio class="audio" src="http://soundbible.com/grab.php?id=1858&type=mp3" onended="this.previousElementSibling.className = 'fa fa-play-circle-o'"></audio>
  </div>

  <div class="container__item">
    <i class="fa fa-play-circle-o"></i>
    <audio class="audio" src="http://soundbible.com/grab.php?id=1858&type=mp3" onended="this.previousElementSibling.className = 'fa fa-play-circle-o'"></audio>
  </div>

  <div class="container__item">
    <i class="fa fa-play-circle-o"></i>
    <audio class="audio" src="http://soundbible.com/grab.php?id=1858&type=mp3" onended="this.previousElementSibling.className = 'fa fa-play-circle-o'"></audio>
  </div>
</div>

Answer 3

Поскольку проблема заключается в воспроизведении только выбранного звука, для меня лучше поставить функцию воспроизведения вне основного кода. Добавил класс в div, который является целью выбора. Воспроизведение аудио, связанного с классом a или b.

var itemLenght= document.querySelectorAll(".container__item").length;

for (var i = 0; i < itemLenght; i++) {

    document.querySelectorAll(".container__item")[i].addEventListener("click", function(){

        var eventClass = this.classList[0];

        makeSound(eventClass);

    })
}

function makeSound(key){

    switch (key) {
        case "a":
            var audio1 = new Audio("cry.mp3");
            audio1.play();    
        break;
        
        case "b":
            var audio2 = new Audio("dance.mp3");
            audio2.play();    
        break;

        default:
            console.log(event);
        break;
    }
}

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

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

Answer 4

Вот вы:

document.querySelectorAll('.container__item')
  .forEach(a => a.addEventListener('click', playAudio));

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

.container__item {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: solid 1px
}

<div class="container__item">1
  <audio src="http://ice3.somafm.com/defcon-128-mp3" crossorigin="anonymous">
	</audio>
</div>

<div class="container__item">2
  <audio src="http://ice3.somafm.com/bagel-128-mp3" crossorigin="anonymous">
	</audio>
</div>