Javascript 能够在网站中播放多个不同的音乐文件

我正在网站上创建自己的音乐播放器。我有一个问题，我不知道该怎么做，这样我就可以从不同的div播放一些不同的歌曲。更具体地说，我的意思是，当你按下

按钮。play

，在第一个

。音频播放器将播放音乐。mp3。按下
按钮后，在第二个
中播放
。音频播放器将播放音乐1.mp3

<div class="audio-player">
    <audio src="music.mp3"></audio>
    <button class="play">play</button>
    <div class="seek-bar">
        <div class="fill"><div class="handle"></div></div>
    </div>
</div>
<div class="audio-player">
    <audio src="music1.mp3"></audio>
    <button class="play">play</button>
    <div class="seek-bar">
        <div class="fill"><div class="handle"></div></div>
    </div>
</div>

Document
方法返回
与指定选择器或组匹配的文档
选择器。如果未找到匹配项，则返回
null

要获取文档中的所有匹配元素时，应使用

话虽如此，如果你使用它，它可以很容易地做到

基于您的代码的简单示例：


const players=document.querySelectorAll（'.audio player'），
音频=新音频（）；
players.forEach（player=>{
让playBtn=player.querySelector（'.play'）；
playBtn.addEventListener（'单击'，（）=>{
让currentAudio=player.querySelector（'audio'）；
document.querySelectorAll（'.play'）.forEach（btn=>{
如果（btn.textContent=='Pause'）{
btn.textContent='Play'；
}
});
播放切换（currentAudio、playBtn）；
});
});
功能播放切换（currentAudio、playBtn）{
if（audio.src！==currentAudio.src）{
audio.src=currentAudio.src；
音频播放（）；
playBtn.textContent='Pause'；
返回；
}
如果（音频暂停）{
音频播放（）；
playBtn.textContent='Pause'；
}否则{
audio.pause（）；
playBtn.textContent='Play'；
}   
}

玩
玩
@BadroNiaimi我刚刚更改了我帖子的内容。我认为这一点现在得到了更好的解释。
var audio = document.querySelector('audio');
var playBtn = document.querySelector('button.play');
var seekBar = document.querySelector('.seek-bar');
var fillBar = seekBar.querySelector('.fill');

var pointerdown = false;

playBtn.addEventListener('click', function(){
    if (audio.paused) {
        audio.play();
    } else {
        audio.pause();
    }
});

audio.addEventListener('timeupdate', function(){
    if(pointerdown) return;

    var p = audio.currentTime / audio.duration;

    fillBar.style.width = p * 100 + '%';
});

function clamp (min, val, max) {
    return Math.min(Math.max(min, val), max);
}

function getP (e) {
    var p = (e.clientX - seekBar.offsetLeft) / seekBar.clientWidth;
    p = clamp(0, p, 1);

    return p;
}

seekBar.addEventListener('pointerdown', function(e){
    pointerdown = true;

    var p = getP(e);

    fillBar.style.width = p * 100 + '%';
});

window.addEventListener('pointermove', function(e){
    if(!pointerdown) return;

    var p = getP(e);

    fillBar.style.width = p * 100 + '%';
});
window.addEventListener('pointerup', function(e){
    if(!pointerdown) return;

    pointerdown = false;

    var p = getP(e);

    fillBar.style.width = p * 100 + '%';

    audio.currentTime = p * audio.duration;
});