I am making a music tempelate. This is my code and my query on the top. I am loading this query to loadQuestion but it's not happening from my computer.
const songs = [
{
name: "music-1",
title: "Bring me back",
artist: "Honey Singh",
},
{
name: "music-2",
title: "Ku Ku",
artist: "Bilal Saeed",
},
{
name: "music-3",
title: "Mera yaar mila de",
artist: "Rahat Fateh Ali Khan",
},
{
name: "music-4",
title: "Sochta hon",
artist: "Rahat Fateh Ali Khan",
},
{
name: "music-4",
title: "Ki samjhaiye sajna",
artist: "Amrinder Gill",
},
];
const music = document.querySelector("audio");
const img = document.querySelector("img")
const play = document.getElementById("play");
const pause = document.getElementById("pause");
const title = document.getElementById("title");
const artist = document.getElementById("artist");
const next = document.getElementById("next");
const pre = document.getElementById("pre");
// For Play Function
play.addEventListener("click", ()=>{
music.play();
play.style.display="none"
img.classList.add("animation");
pause.style.display="inline-block";
});
// For Pause Functio
pause.addEventListener("click", ()=>{
music.pause();
play.style.display="inline-block"
img.classList.remove("animation");
pause.style.display="none";
});
// Changing the music data
const loadSong = (songs) => {
title.textContent = songs.title;
artist.textContent = songs.artist;
music.src = `${window.location.origin}/assets/music/${songs.name}.mp3`;
img.src = `${window.location.origin}/assets/images/${songs.name}.jpg`;
console.log(songs[2]);
}
loadSong(songs[2]);