Beginner - Different Music Players in Different Modals

1

So I am a total beginner - I put a music player that opens in a modal in JS and it works! However, on the same page but a different modal I want to make another music player (with a different playlist) and it shows nothing. I have two playlists one named music and one music2. I want to know if this is even possible to do atp …

I am doing this just for fun and learning a new skill - so I watched a tutorial on how to make a music player, so it isn’t an original code! I can show you my html as well if that helps!

const music = document.querySelector(".music"),
musicImg= music.querySelector(".img-area img"),
musicName = music.querySelector(".song-details .name"),
musicArtist = music.querySelector(".song-details .artist"),
mainAudio = music.querySelector("#main-audio"),
playPauseBtn = music.querySelector(".play-pause"),
prevBtn = music.querySelector("#prev"),
nextBtn = music.querySelector("#next");
progressArea = music.querySelector(".progress-area"),
progressBar = music.querySelector(".progress-bar"),
musicList = music.querySelector(".music-list"),
showMoreBtn = music.querySelector("#more-music"),
hideMusicBtn = music.querySelector("#close");


let musicIndex = 1;

window.addEventListener("load", ()=>{
  loadMusic(musicIndex); //calling load function once window loads
})

// load music function
function loadMusic(indexNumb){
  musicName.innerText = allMusic[indexNumb - 1].name;
  musicArtist.innerText = allMusic[indexNumb - 1].artist;
  musicImg.src = `playlist1/images/${allMusic[indexNumb - 1].img}.jpg`;
  mainAudio.src = `playlist1/songs/${allMusic[indexNumb - 1].src}.mp3`;
}

//play music function
function playMusic(){
  music.classList.add("paused");
  playPauseBtn.querySelector("i").innerText = "pause";
  mainAudio.play();
}

function nextMusic(){
  musicIndex++;
  musicIndex > allMusic.length ? musicIndex =1 : musicIndex = musicIndex;
  loadMusic(musicIndex);
  playMusic();
}

function prevMusic(){
  musicIndex--;
  musicIndex < 1 ? musicIndex = allMusic.length : musicIndex = musicIndex;
  loadMusic(musicIndex);
  playMusic();
}

//pause music function
function pauseMusic(){
  music.classList.remove("paused");
  playPauseBtn.querySelector("i").innerText = "play_arrow";
  mainAudio.pause();
}  

//play or music button event
playPauseBtn.addEventListener("click", () =>{
  const isMusicPaused = music.classList.contains("paused");
  //if isMusicPaused is true then call pauseMusic else call playMusic
  isMusicPaused ? pauseMusic() : playMusic();
});

nextBtn.addEventListener("click", () =>{
  nextMusic();
});


prevBtn.addEventListener("click", () =>{
  prevMusic();
});

mainAudio.addEventListener("timeupdate", (e)=>{
  const currentTime = e.target.currentTime;
  const duration = e.target.duration;
  let progressWidth = (currentTime / duration) * 100;
  progressBar.style.width = `${progressWidth}%`;

  let musicCurrentTime = music.querySelector(".current"),
  musicDuration = music.querySelector(".duration");
  
  mainAudio.addEventListener("loadeddata", ()=>{
    let audioDuration = mainAudio.duration;
    let totalMin = Math.floor(audioDuration / 60);
    let totalSec = Math.floor(audioDuration % 60);
    if(totalSec < 10){
      totalSec = `0${totalSec}`;
    }
    musicDuration.innerText = `${totalMin}:${totalSec}`;
  });
    let currentMin = Math.floor(currentTime / 60);
    let currentSec = Math.floor(currentTime % 60);
    if(currentSec < 10){
      currentSec = `0${currentSec}`;
    }
    musicCurrentTime.innerText = `${currentMin}:${currentSec}`;
});

progressArea.addEventListener("click", (e) =>{
  let progressWidthval = progressArea.clientWidth;
  let clickOddSetX = e.offsetX;
  let songDuration = mainAudio.duration;
  
  mainAudio.currentTime = (clickOddSetX / progressWidthval) * songDuration;
  playMusic();
});
2

Welcome to the forum @strugglingimmensely

You could try the following, but you’ll need to know how to code.

  1. Create a drop down menu using the select element in the HTML, for now name one option play1 and the other option play2.
  2. You only need one modal, if you want to play one song at a time
  3. In an object named playlists, store the playlists, with play1 as one key, and play2as the second key.
  4. When you want to play a playlilst, select one from the drop down menu
  5. Make sure you reference the drop down menu in the JavaScript file.

Best practice is to show one modal at a time, so you shouldn’t have two active modals open at the same time.

Happy coding