Trying to add-on to a Music Player I created through a YouTube tutorial, and need a little help. The tutorial only had one song file, so I was able to get this to work using the tutorial. However, I tried to add more songs and found a way to do it. I know the way I did it below is very cumbersome, so there must be a better way to do this.
The goal is to have a simple ‘play.gif’ play button that, when you press it, plays a song and changes to a pause button. If you press it again, it pauses. If you press a new song, it stops the old song and plays the new one. Super simple.
The code below is what I am working from.
Script at the bottom.
<audio id="song1">
<source src="https://phoenixim.com/Phoenix-IML/MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon1">></b></div>
</div>
<audio id="song2">
<source src="https://phoenixim.com/Phoenix-IML/MUSIC/MUSIC02.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon2">></b></div>
</div>
<audio id="song3">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon3">></b></div>
</div>
<audio id="song4">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon4">></b></div>
</div>
<audio id="song5">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon5">></b></div>
</div>
<audio id="song6">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon6">></b></div>
</div>
<audio id="song7">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon7">></b></div>
</div>
<audio id="song8">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon8">></b></div>
</div>
<audio id="song9">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon9">></b></div>
</div>
<audio id="song10">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon10">></b></div>
</div>
<audio id="song11">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon11">></b></div>
</div>
<audio id="song12">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon12">></b></div>
</div>
<audio id="song13">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon13">></b></div>
</div>
<audio id="song14">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon14">></b></div>
</div>
<audio id="song15">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon15">></b></div>
</div>
<audio id="song16">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon16">></b></div>
</div>
<audio id="song17">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon17">></b></div>
</div>
<audio id="song18">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon18">></b></div>
</div>
<audio id="song19">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon19">></b></div>
</div>
<audio id="song20">
<source src="MUSIC/MUSIC01.mp4" type="audio/mpeg">
</audio>
<div class="controls">
<div onclick="playPause()"><b class="fa-solid fa-play" id="ctrlIcon20">></b></div>
</div>
<script>
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");
}
</script>
<script>
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");
}
</script>
