Несколько аудиоплееров не работают - только первый (Javascript)

Question

У меня есть карточки продуктов, на каждой из которых есть игрок.

Что ожидается:

Каждый игрок должен воспроизводить собственную дорожку при нажатии на кнопку воспроизведения.

Что происходит сейчас:

Когда я нажмите на любую из кнопок воспроизведения, она воспроизводит только первый трек.

Вот мой код:

let isPlaying = false
        let playBtn = document.querySelectorAll('.playerButton');
        for (var i = 0; i < player.length; i++) {    
            if (playBtn != null) {
            playBtn[i].addEventListener('click', togglePlay);
            }
        }
        // Controls & Sounds Methods
        // ----------------------------------------------------------
        function togglePlay() {
            let player = document.querySelectorAll('.player')
                if (player.paused === false) {
                    player.pause();
                    isPlaying = false;
                    document.querySelector(".fa-pause")
                        .style.display = 'none';
                    document.querySelector(".fa-play")
                        .style.display = 'block';

                } else {
                    player[0].play();
                    document.querySelector(".fa-play")
                        .style.display = 'none';
                    document.querySelector(".fa-pause")
                        .style.display = 'block';
                    isPlaying = true;
                }
           
        }
    
  

{% for product in products %}
    <div class="card-trip">
        <div class="player-section">
        <img src="{{ product.image.url }}" />
        <div class="audio-player">
                <a class="playerButton">
                    <span>
                        <i class="fas fa-play"></i>
                    </span>
                    <span>
                        <i class="fas fa-pause"></i>
                    </span>
                </a>
            <audio id="player" class="player">
                <source src="https://api.coderrocketfuel.com/assets/pomodoro-times-up.mp3">
              Your browser does not support the audio element.
              </audio>
            </div>
          </div>
          <div class="card-trip-infos">
            <div>
              <h2>{{product.name}}</h2>
              <p>{{product.description}}</p>
              <button class="btn" type="button">buy now - ${{product.price}}</button>
              <p>{{product.tag}}</p>
            </div>
        </div>
        </div>
    {% endfor %}

Answer 1

Вы должны изолировать каждый из своих элементов, указав им правильные индексы.

player - это массив, поэтому вам нужно получить доступ к элементам, используя индекс

let player = document.querySelectorAll('.player')

Это должно помочь:

let isPlaying = false
let playBtn = document.querySelectorAll('.playerButton');
for (let i = 0; i < player.length; i++) {
  if (playBtn[i]) {
    playBtn[i].addEventListener('click', ()=>togglePlay(i));
  }
}
// Controls & Sounds Methods
// ----------------------------------------------------------
function togglePlay(i) {
  let player = document.querySelectorAll('.player')
  if (player[i].paused === false) {
    player[i].pause();
    isPlaying = false;
    document.querySelector(".fa-pause")
      .style.display = 'none';
    document.querySelector(".fa-play")
      .style.display = 'block';

  } else {
    player[i].play();
    document.querySelector(".fa-play")
      .style.display = 'none';
    document.querySelector(".fa-pause")
      .style.display = 'block';
    isPlaying = true;
  }

}