能夠從網站上的 div 播放各種聲音文件

Question

我正在網站上創建自己的音樂播放器。 我有一個問題，我不知道該怎么做才能從不同的 div 播放幾首不同的歌曲。 更具體地說，我的意思是當你按下 button.play 時，在第一個 .audio-player 中將播放 music.mp3。 並按下按鈕后。 在第二個.audio-player 中播放將播放music1.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>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #0f0f0f;
    color: #fff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
}
.audio-player {
    width: 80%;
    height: 200px;
    box-shadow: 0 0 10px rgba(255,255,255,.2);
    border-radius: 10px;
}
.play {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    margin-bottom: 30px;
    outline: none;
    border: none;
}
.play:focus {
    background-color: #f90;
}
.seek-bar {
    width: 90%;
    margin: 0 auto;
    height: 4px;
    border-radius: 4px;
    background-color: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    cursor: pointer;
}
.fill {
    height: 4px;
    border-radius: 4px;
    background-color: #fff;
    position: relative;
}
.handle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    background: #fff;
    transform: translate(50%,-50%) scale(0);
    transition: transform .2s;
}
.seek-bar:hover .handle {
    transform: translate(50%,-50%) scale(1);
}
.handle:active {
    transform: translate(50%,-50%) scale(1.4) !important;
}

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('pointerup', function(e){
    if(!pointerdown) return;

    pointerdown = false;

    var p = getP(e);

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

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

Answer 1

如果沒有音頻文件的絕對 URL，這很難測試。 您只會獲得對音頻選擇器的第一個引用。 使用 querySelectorAll 會給你一個 NodeList。 此外，您需要為每個媒體對象附加一個事件偵聽器。 您需要遍歷 NodeList 來執行此操作。

編輯：我添加了在定位條定位點播放的邏輯（尊重之前的播放/暫停狀態），並在播放結束時重置音頻。

 var audio = document.querySelectorAll('audio'); var playBtn = document.querySelectorAll('.play'); var seekBar = document.querySelectorAll('.seek-bar'); var fillBar = document.querySelectorAll('.fill'); var pointerdown = false; var playing = undefined; function getP(e, i) { var p = (e.clientX - seekBar[i].offsetLeft) / seekBar[i].clientWidth; p = clamp(0, p, 1); return p; } function clamp(min, val, max) { return Math.min(Math.max(min, val), max); } function updateFillBar(i, val) { fillBar[i].style.width = val + '%'; } function handleTimeline(i) { if (pointerdown) return; var p = audio[i].currentTime / audio[i].duration; updateFillBar(i, p * 100); } function resetAudio(i) { audio[i].currentTime = 0; updateFillBar(i, 0); } function handleSeekbar(e, i) { pointerdown = true; var vidDur = audio[i].duration; var seekCoords = Math.round( (e.clientX - seekBar[i].offsetLeft) * (vidDur / seekBar[i].clientWidth) ); handleAudioPlayback(i, seekCoords); var p = getP(e, i); updateFillBar(i, p * 100); } function handleButtonClick(i, time) { if (playing === undefined) { playing = i; } handleAudioPlayback(i, time); } function handleAudioPlayback(i, time) { if (playing !== i) { audio[playing].pause(); playing = i; } var a = audio[i]; if (pointerdown) { a.currentTime = time; a.play(); pointerdown = false; } else if (a.paused) { a.play(); } else { a.pause(); } } audio.forEach((node, i) => { node.addEventListener('timeupdate', function(e) { handleTimeline(i); }); node.addEventListener('ended', function(e) { resetAudio(i); }); seekBar[i].addEventListener( 'pointerdown', function(e) { handleSeekbar(e, i); }, false ); playBtn[i].addEventListener('click', function(e) { handleButtonClick(i, 0); }); });

 * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0f0f0f; color: #fff; height: 100vh; display: flex; justify-content: center; align-items: center; touch-action: none; } .audio-player { width: 80%; height: 200px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); border-radius: 10px; } .play { width: 40px; height: 40px; background-color: #fff; border-radius: 50%; margin-bottom: 30px; outline: none; border: none; } .play:focus { background-color: #f90; } .seek-bar { width: 90%; margin: 0 auto; height: 4px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.2); display: flex; align-items: center; cursor: pointer; } .fill { height: 4px; border-radius: 4px; background-color: #fff; position: relative; } .handle { width: 12px; height: 12px; border-radius: 50%; position: absolute; right: 0; top: 50%; background: #fff; transform: translate(50%, -50%) scale(0); transition: transform 0.2s; } .seek-bar:hover .handle { transform: translate(50%, -50%) scale(1); } .handle:active { transform: translate(50%, -50%) scale(1.4) !important; }

 <div class="audio-player"> <audio src="https://milessite.com/music/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="https://milessite.com/music/music1.mp3"></audio> <button class="play">play</button> <div class="seek-bar"> <div class="fill"><div class="handle"></div></div> </div> </div>