javascript - 如何使用javascript播放具有相同ID的两个音频文件
问题描述
我有两个带有进度条的音频文件,并且都具有相同的 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 中的菜鸟
解决方案
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
改用。