多个音频播放器不工作 - 只有第一个（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 = falselet playBtn = document.querySelectorAll('.playerButton');for (let i = 0; i < player.length; i++) {&nbsp; if (playBtn[i]) {&nbsp; &nbsp; playBtn[i].addEventListener('click', ()=>togglePlay(i));&nbsp; }}// Controls & Sounds Methods// ----------------------------------------------------------function togglePlay(i) {&nbsp; let player = document.querySelectorAll('.player')&nbsp; if (player[i].paused === false) {&nbsp; &nbsp; player[i].pause();&nbsp; &nbsp; isPlaying = false;&nbsp; &nbsp; document.querySelector(".fa-pause")&nbsp; &nbsp; &nbsp; .style.display = 'none';&nbsp; &nbsp; document.querySelector(".fa-play")&nbsp; &nbsp; &nbsp; .style.display = 'block';&nbsp; } else {&nbsp; &nbsp; player[i].play();&nbsp; &nbsp; document.querySelector(".fa-play")&nbsp; &nbsp; &nbsp; .style.display = 'none';&nbsp; &nbsp; document.querySelector(".fa-pause")&nbsp; &nbsp; &nbsp; .style.display = 'block';&nbsp; &nbsp; isPlaying = true;&nbsp; }}