如何使用javascript播放具有相同ID的两个音频文件

Question

我有两个带有进度条的音频文件，并且都具有相同的 ID：

<audio id="player" src="<?=base_url('mp3/'.$rec->file)?>"></audio>
                    </p>
                            <button class="btn btn-success btn-sm" id="play">
                            <svg style='font-size: 1.3em' class="bi bi-play-fill" width="1em" height="1em" 
                                viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"/>
                            </svg>
                        </button>
                        <button class="btn btn-secondary btn-sm" id="pause">
                            <svg style='font-size: 1.3em' class="bi bi-pause-fill" width="1em" height="1em" viewBox="0 0 16 16" 
                                fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path d="M5.5 3.5A1.5 1.5 0 017 5v6a1.5 1.5 0 01-3 0V5a1.5 1.5 0 011.5-1.5zm5 0A1.5 1.5 0 0112 5v6a1.5 1.5 0 01-3 0V5a1.5 1.5 0 011.5-1.5z"/>
                            </svg>
                        </button>
                        <progress style="height: 4px;border: none;width: 300px;max-width: 330px" id="seekbar"  value="0" max="1">ssss

这里是js

  <script type="text/javascript">
$('#play').on('click', function() {
    document.getElementById('player'.).play();
});

$('#pause').on('click', function() {
    document.getElementById('player').pause();
});

$('#player').on('timeupdate', function() {
    $('#seekbar').attr("value", this.currentTime / this.duration);
});
</script>

现在我可以播放第一个音频文件，但不能播放第二个文件

我该怎么做？？？？？？

如果有任何其他解决方案，例如循环 id 或任何其他解决方案，请告诉我，因为我是 js 中的菜鸟

Answer 1

document.getElementById 只返回第一个匹配项，如果要获取所有匹配项，请使用 document.querySelectorAll 代替。

你应该这样做

$('#play').on('click', function() {
    [...document.querySelectorAll('#player')].forEach(e => e.play());
});

$('#pause').on('click', function() {
    [...document.querySelectorAll('#player')].forEach(e => e.pause());
});

正如 kerbholz 提到的，id 应该是唯一的。如果它意味着有多个实例，请考虑改用class。