Free javascript Hosting


spotify.js

Uploaded on May 25 2022 19:44 by hellonitinbro

console.log("Welcome to Spotify");
console.time("Nitin");
// Initialize the Variables

let songIndex = 0;
let audioElement = new Audio('https://drive.google.com/uc?export=view&id=1XfOfCeNJAqjbf7YZ8sVXiJ8Jw2bdlJio');
let masterPlay = document.getElementById('masterPlay');
let myProgressBar = document.getElementById('myProgressBar');
let gif = document.getElementById('gif');
let masterSongName = document.getElementById('masterSongName');
let songItems = Array.from(document.getElementsByClassName('songItem'));
// let timestamp = Array.from(document.getElementsByClassName('timestamp'));

const makeAllPlays = () => {
Array.from(document.getElementsByClassName('songItemPlay')).forEach((element) => {
element.classList.remove('fa-pause-circle');
element.classList.add('fa-play-circle');
})
}

let songs = [
{ songName: "Tareef Karu - Sanam", filePath: "https://drive.google.com/uc?export=view&id=1XfOfCeNJAqjbf7YZ8sVXiJ8Jw2bdlJio", coverPath: "covers/1.jpg" },
{ songName: "Monta Re", filePath: "songs/2.mp3", coverPath: "https://drive.google.com/uc?export=view&id=1HO3EVXi2PVgRoiZDlkltdD_F2QZfDIJe" },
{ songName: "Death Bed", filePath: "https://drive.google.com/uc?export=view&id=1w2qSizpywz0E-eY_vKn-IZ0qUkkyaaKi", coverPath: "covers/3.jpg" },
{ songName: "Bole Jo Koyal", filePath: "https://drive.google.com/uc?export=view&id=1EN1ii8qSIHSjR65HBSL1vCDDRIGmkyt2", coverPath: "covers/4.jpg" },
{ songName: "Ambarsariya", filePath: "https://drive.google.com/uc?export=view&id=1pNIMCD7go0I4iaiAQmRWSepUQMKArUNT", coverPath: "covers/5.jpg" },
{ songName: "Dil Meri Na Sune", filePath: "songs/6.mp3", coverPath: "https://drive.google.com/uc?export=view&id=1KQcqXoOuOM4h4qpROXD5jl5NCAgMSequ" },
{ songName: "Kaanta Laga", filePath: "https://drive.google.com/uc?export=view&id=1b8D_oAv5n-KaI8zhFuLOQiphwPeVi3he", coverPath: "covers/7.jpg" },
{ songName: "Tu Aake dekh le", filePath: "https://drive.google.com/uc?export=view&id=1pKVaYDeD0FpqH8uJN6oNog1AJha2QhP1", coverPath: "covers/8.jpg" },
{ songName: "Chaand Baaliyan", filePath: "https://drive.google.com/uc?export=view&id=1FEZQY_fe-zx_7NN-Ta9YKkZ-SYAdzRjL", coverPath: "covers/9.jpg" },
{ songName: "Afreen Afreen", filePath: "https://drive.google.com/uc?export=view&id=1mikqbRnapLQVWxsZ_bPFrp6vN4QmySie", coverPath: "covers/10.jpg" },
]

songItems.forEach((element, i) => {
element.getElementsByTagName("img")[0].src = songs[i].coverPath;
element.getElementsByClassName("songName")[0].innerText = songs[i].songName;
})

// Listen to Events
audioElement.addEventListener('timeupdate', () => {
// Update Seekbar
progress = parseInt((audioElement.currentTime / audioElement.duration) * 100);
myProgressBar.value = progress;
})

myProgressBar.addEventListener('change', () => {
audioElement.currentTime = myProgressBar.value * audioElement.duration / 100;
})

Array.from(document.getElementsByClassName('songItemPlay')).forEach((ele) => {
ele.addEventListener('click', (e) => {
let f = e.target.classList.contains('fa-play-circle');
if (f == true) {
makeAllPlays();
songIndex = parseInt(e.target.id);
e.target.classList.remove('fa-play-circle');
e.target.classList.add('fa-pause-circle');
audioElement.src = `songs/${songIndex + 1}.mp3`;
masterSongName.innerText = songs[songIndex].songName;
audioElement.currentTime = 0;
audioElement.play();
gif.style.opacity = 1;
masterPlay.classList.remove('fa-play-circle');
masterPlay.classList.add('fa-pause-circle');
}
else
{
makeAllPlays();
audioElement.pause();
gif.style.opacity = 0;
masterPlay.classList.remove('fa-pause-circle');
masterPlay.classList.add('fa-play-circle');
}
})
})

document.getElementById('next').addEventListener('click', () => {
if (songIndex >= 9) {
songIndex = 0
}
else {
songIndex += 1;
}
audioElement.src = `songs/${songIndex + 1}.mp3`;
masterSongName.innerText = songs[songIndex].songName;
audioElement.currentTime = 0;
audioElement.play();
masterPlay.classList.remove('fa-play-circle');
masterPlay.classList.add('fa-pause-circle');
makeAllPlays();
document.getElementById(songIndex).classList.remove('fa-play-circle');
document.getElementById(songIndex).classList.add('fa-pause-circle');

})

document.getElementById('previous').addEventListener('click', () => {
if (songIndex <= 0) {
songIndex = 9
}
else {
songIndex -= 1;
}
audioElement.src = `songs/${songIndex + 1}.mp3`;
masterSongName.innerText = songs[songIndex].songName;
audioElement.currentTime = 0;
audioElement.play();
masterPlay.classList.remove('fa-play-circle');
masterPlay.classList.add('fa-pause-circle');
makeAllPlays();
document.getElementById(songIndex).classList.remove('fa-play-circle');
document.getElementById(songIndex).classList.add('fa-pause-circle');


})

// Handle play/pause click
masterPlay.addEventListener('click', () => {
if (audioElement.paused || audioElement.currentTime <= 0) {
audioElement.play();
masterPlay.classList.remove('fa-play-circle');
masterPlay.classList.add('fa-pause-circle');

gif.style.opacity = 1;
}
else {
audioElement.pause();
makeAllPlays();
masterPlay.classList.remove('fa-pause-circle');
masterPlay.classList.add('fa-play-circle');
gif.style.opacity = 0;
}
})
console.timeEnd("Nitin");

Back to list