多个音频播放器不工作 - 只有第一个（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>

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;

  }

}