When i play my 3 tracks they overlap on each other, how can i pause track1 when i play track2 ? using javascript

This is my code for javascript, what should i use to stop my tracks overlapping ? I'm beginner at this and i want simple and understandable way if it is possible please. your help much appreciated.

    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>';
        }
    }

1 answer

  • answered 2021-03-04 03:00 Jejun

    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);
        }
    }
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum