javascript - 当我播放我的 3 首曲目时，它们相互重叠，我如何在播放 track2 时暂停 track1？使用 javascript

Question

这是我的 javascript 代码，我应该用什么来阻止我的曲目重叠？我是这方面的初学者，如果可能的话，我想要简单易懂的方法。非常感谢您的帮助。

    let track1 = document.getElementById("track1");    
    let icontrack1 = document.getElementById("icontrack1");

    icontrack1.onclick = function (){
        if(track1.paused){
            track1.play();
            icontrack1.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
        }
        else{
            track1.pause();
            icontrack1.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';
        }
    }

    let track2 = document.getElementById("track2");
    let icontrack2 = document.getElementById("icontrack2");

    icontrack2.onclick = function (){
        if(track2.paused){
            track2.play();
            icontrack2.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
        }
        else{
            track2.pause();
            icontrack2.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';
        }
    }

    let track3 = document.getElementById("track3");
    let icontrack3 = document.getElementById("icontrack3");

    icontrack3.onclick = function (){
        if(track3.paused){
            track3.play();
            icontrack3.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
        }
        else{
            track3.pause();
            icontrack3.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';
        }
    }

Answer 1

Play what you want to hear and pause others.

let track1 = document.getElementById("track1");    
let track2 = document.getElementById("track2");
let track3 = document.getElementById("track3");
let icontrack1 = document.getElementById("icontrack1");
let icontrack2 = document.getElementById("icontrack2");
let icontrack3 = document.getElementById("icontrack3");

function playTrack(trackNum) {
    var track = document.getElementById("track"+String(trackNum))
    var icontrack = document.getElementById("icontrack"+String(trackNum))
    track.play();
    icontrack.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
    else {
        track.pause();
        icontrack.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';
    }
}

function pauseTrack(trackNum) {
    var track = document.getElementById("track"+String(trackNum))
    var icontrack = document.getElementById("icontrack"+String(trackNum))
    track.pause();
    icontrack.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';
}

icontrack1.onclick = function (){
    if(track1.paused){
        playTrack(1);
        pauseTrack(2);
        pauseTrack(3);
    }
    else{
        pauseTrack(1);
    }
}



icontrack2.onclick = function (){
    if(track2.paused){
        playTrack(2);
        pauseTrack(1);
        pauseTrack(3);
    }
    else{
        pauseTrack(2);
    }
}



icontrack3.onclick = function (){
    if(track3.paused){
        playTrack(3);
        pauseTrack(1);
        pauseTrack(2);
    }
    else{
        pauseTrack(3);
    }
}