Попытка дополнить музыкальный проигрыватель, который я создал с помощью учебника и нуждается в небольшом совете о том, к ⇐ Javascript

[Anonymous]

Попытка дополнения к музыкальному проигрыванию, который я создал через учебник на YouTube и нуждается в небольшой помощи. У учебника был только один файл песни, поэтому я смог заставить это работать, используя учебник. Тем не менее, я попытался добавить больше песен и нашел способ сделать это. Я знаю, что то, как я это сделал ниже, очень громоздкий, поэтому должен быть лучший способ сделать это. Если вы нажмите снова, он останавливается. Если вы нажмете новую песню, она останавливает старую песню и играет новую. Супер просто.


>





>





>





>





>





>





>





>





>





>





>





>





>





>





>





>





>





>





>





>



let progress = document.getElementById("progress");
let song1 = document.getElementById("song1");
let ctrlIcon1 = document.getElementById("ctrlIcon1");

song1.onloadedmetadata = function (){
progress.max = song1.duration;
progress.value = song1.currentTime;
}

function playPause(){
if(ctrlIcon1.classList.contains("fa-pause")){
song1.pause();
ctrlIcon1.classList.remove("fa-pause");
ctrlIcon1.classList.add("fa-play");
}
else{
song1.play();
ctrlIcon1.classList.add("fa-pause");
ctrlIcon1.classList.remove("fa-play");
}
}

if(song1.play()){
setInterval(()=>{
progress.value = song1.currentTime;
},500)
}

progress.onchange = function(){
song1.play();
song1.currentTime = progress.value;
ctrlIcon1.classList.add("fa-pause");
ctrlIcon1.classList.remove("fa-play");

}




let progress = document.getElementById("progress");
let song2 = document.getElementById("song2");
let ctrlIcon2 = document.getElementById("ctrlIcon2");

song2.onloadedmetadata = function (){
progress.max = song2.duration;
progress.value = song2.currentTime;
}

function playPause(){
if(ctrlIcon2.classList.contains("fa-pause")){
song2.pause();
ctrlIcon2.classList.remove("fa-pause");
ctrlIcon2.classList.add("fa-play");
}
else{
song2.play();
ctrlIcon2.classList.add("fa-pause");
ctrlIcon2.classList.remove("fa-play");
}
}

if(song2.play()){
setInterval(()=>{
progress.value = song2.currentTime;
},500)
}

progress.onchange = function(){
song2.play();
song2.currentTime = progress.value;
ctrlIcon2.classList.add("fa-pause");
ctrlIcon2.classList.remove("fa-play");

}





Подробнее здесь: https://stackoverflow.com/questions/796 ... ed-a-littl