-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
100 lines (91 loc) · 4.07 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
// Initialize the Variables
let songIndex = 0;
let audioElement = new Audio('songs/1.mp3');
const masterPlay = document.querySelector('#masterPlay');
const progressBar = document.querySelector('#progressBar');
const gif = document.querySelector('#gif');
const masterSongName = document.querySelector('#masterSongName');
const songItems = document.querySelectorAll('.songItem');
const songs = [
{ songName: "Warriyo - Mortals [NCS Release]", filePath: "songs/1.mp3", coverPath: "songs/covers/1.jpg" },
{ songName: "Cielo - Huma-Huma", filePath: "songs/2.mp3", coverPath: "songs/covers/2.jpg" },
{ songName: "DEAF KEV - Invincible [NCS Release]-320k", filePath: "songs/3.mp3", coverPath: "songs/covers/3.jpg" },
{ songName: "Different Heaven & EH!DE - My Heart [NCS Release]", filePath: "songs/4.mp3", coverPath: "songs/covers/4.jpg" },
{ songName: "Janji-Heroes-Tonight-feat-Johnning-NCS-Release", filePath: "songs/5.mp3", coverPath: "songs/covers/5.jpg" },
{ songName: "Rabba - Salam-e-Ishq", filePath: "songs/2.mp3", coverPath: "songs/covers/6.jpg" },
{ songName: "Sakhiyaan - Salam-e-Ishq", filePath: "songs/2.mp3", coverPath: "songs/covers/7.jpg" },
{ songName: "Bhula Dena - Salam-e-Ishq", filePath: "songs/2.mp3", coverPath: "songs/covers/8.jpg" },
{ songName: "Tumhari Kasam - Salam-e-Ishq", filePath: "songs/2.mp3", coverPath: "songs/covers/9.jpg" },
{ songName: "Na Jaana - Salam-e-Ishq", filePath: "songs/4.mp3", coverPath: "songs/covers/10.jpg" },
];
songItems.forEach((element, i) => {
element.querySelectorAll("img")[0].src = songs[i].coverPath;
element.querySelectorAll(".songName")[0].innerText = songs[i].songName;
});
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();
masterPlay.classList.remove('fa-pause-circle');
masterPlay.classList.add('fa-play-circle');
gif.style.opacity = 0;
}
});
audioElement.addEventListener('timeupdate', () => {
progress = parseInt((audioElement.currentTime / audioElement.duration) * 100);
progressBar.value = progress;
});
progressBar.addEventListener('change', () => {
audioElement.currentTime = progressBar.value * audioElement.duration / 100;
});
const makeAllPlays = () => {
document.querySelectorAll('.songItemPlay').forEach((element) => {
element.classList.remove('fa-pause-circle');
element.classList.add('fa-play-circle');
});
};
document.querySelectorAll('.songItemPlay').forEach((element) => {
element.addEventListener('click', (e) => {
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');
});
});
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');
});
document.getElementById('previous').addEventListener('click', () => {
if (songIndex <= 0) {
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');
});