-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
112 lines (103 loc) · 3.87 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
101
102
103
104
105
106
107
108
109
110
111
112
console.log("Welcome To Spotify");
let songIndex = 0;
let audioElement = new Audio("musics/1.mp3");
let masterPlay = document.getElementById("play");
let progress = document.getElementById("progress");
let songsName = document.getElementById("songsName");
let gif = document.getElementById("gif");
let side = document.getElementsByClassName("sidePlay");
let songs = [
{songName: ' Despacito', filepath: 'musics/1.mp3', coverPath: 'images/c1.png'},
{songName: ' Shape Of You', filepath: 'musics/2.mp3', coverPath: 'images/c2.jpg'},
{songName: ' Mercy', filepath: 'musics/3.mp3', coverPath: 'images/c3.jpg'},
{songName: ' Let Me Love You', filepath: 'musics/4.mp3', coverPath: 'images/c4.png'},
{songName: ' Daru Badnaam', filepath: 'musics/5.mp3', coverPath: 'images/c5.jfif'},
{songName: ' Backbone', filepath: 'musics/6.mp3', coverPath: 'images/c6.jpg'},
{songName: ' 3 Peg', filepath: 'musics/7.mp3', coverPath: 'images/c7.cms'},
{songName: ' Brown Munde', filepath: 'musics/8.mp3', coverPath: 'images/c8.jfif'},
{songName: ' High Rated Gabru', filepath: 'musics/9.mp3', coverPath: 'images/c9.jpg'}
]
masterPlay.addEventListener('click', ()=> {
if(audioElement.paused || audioElement.currentTime<=0)
{
audioElement.play();
masterPlay.classList.remove('fa-play');
masterPlay.classList.add('fa-pause');
gif.style.opacity = 1;
}
else
{
audioElement.pause();
masterPlay.classList.remove('fa-pause');
masterPlay.classList.add('fa-play');
gif.style.opacity = 0;
}
})
audioElement.addEventListener('timeupdate', ()=> {
songProgress = parseInt(audioElement.currentTime / audioElement.duration *100); // percent of song played
progress.value = songProgress;
})
progress.addEventListener('change', ()=>{
audioElement.currentTime = progress.value * audioElement.duration /100;
})
const allPlay = ()=>{
Array.from(document.getElementsByClassName('sidePlay')).forEach((element)=>{
element.classList.remove('fa-circle-pause');
element.classList.add('fa-circle-play');
})
}
Array.from(document.getElementsByClassName('sidePlay')).forEach((element)=>{
element.addEventListener('click', (e)=>{
allPlay();
songIndex = parseInt(e.target.id);
e.target.classList.remove('fa-circle-play');
e.target.classList.add('fa-circle-pause');
audioElement.src = `musics/${songIndex+1}.mp3`;
songsName.innerText = songs[songIndex].songName;
audioElement.currentTime = 0;
audioElement.play();
gif.style.opacity = 1;
masterPlay.classList.remove('fa-circle-play');
masterPlay.classList.add('fa-circle-pause');
masterPlay.classList.remove('fa-play');
masterPlay.classList.add('fa-pause');
})
})
document.getElementById('next').addEventListener('click',()=>{
if(songIndex >= 8)
{
songIndex = 0;
}
else
{
songIndex = songIndex + 1;
}
audioElement.src = `musics/${songIndex+1}.mp3`;
songsName.innerText = songs[songIndex].songName;
audioElement.currentTime = 0;
audioElement.play();
gif.style.opacity = 1;
masterPlay.classList.remove('fa-circle-play');
masterPlay.classList.add('fa-circle-pause');
masterPlay.classList.remove('fa-play');
masterPlay.classList.add('fa-pause');
})
document.getElementById('previous').addEventListener('click',()=>{
if(songIndex <= 0)
{
songIndex = 0;
}
else
{
songIndex = songIndex - 1;
}
audioElement.src = `musics/${songIndex+1}.mp3`;
songsName.innerText = songs[songIndex].songName;
audioElement.currentTime = 0;
audioElement.play();
gif.style.opacity = 1;
masterPlay.classList.remove('fa-circle-play');
masterPlay.classList.add('fa-circle-pause');
masterPlay.classList.remove('fa-play');
masterPlay.classList.add('fa-pause');
})