JavaScriptProjectMusicPlayer/script.js at master · jthinlay/JavaScriptProjectMusicPlayer · GitHub

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
constmusic=document.querySelector('audio');
constimage=document.getElementById('image');
consttitle=document.getElementById('title');
constartist=document.getElementById('artist');

constprogressContainer=document.getElementById('progress-container');
constcurrentTimeEl=document.getElementById('current-time');
constdurationEl=document.getElementById('duration');

constplayBtn=document.getElementById('play');
constprevBtn=document.getElementById('prev');
constnextBtn=document.getElementById('next');
constvoluBtn=document.getElementById('volumeIcon');

functionloadSongs(song){
image.src=`img/${song.name}.jpg`;
music.src=`music/${song.name}.mp3`;
title.textContent=song.displayName;
artist.textContent=song.artist;
}
loadSongs(songs[0]);

letisPlaying=false;

functionplaySong(){
isPlaying=true;
music.play();
playBtn.classList.replace('fa-play','fa-pause');
voluBtn.classList.replace('fa-volume-down','fa-volume-up');
}
functionpauseSong(){
isPlaying=false;
music.pause();
playBtn.classList.replace('fa-pause','fa-play');
voluBtn.classList.replace('fa-volume-up','fa-volume-down');
}
playBtn.addEventListener('click',()=>(isPlaying ? pauseSong() : playSong()));

leti=0;
functionnextSong(){
playBtn.classList.replace('fa-play','fa-pause');
isPlaying=true;
i++;
if(i>songs.length-1){
i=0;
}
loadSongs(songs[i]);
playSong();
}
functionprevSong(){
playBtn.classList.replace('fa-play','fa-pause');
isPlaying=true;
i--;
if(i<1){
i=songs.length-1;
}
loadSongs(songs[i]);
playSong();

}
functionupdateProgressBar(event){
const{currentTime, duration }=event.srcElement;
constprogressPercent=(currentTime/duration)*100;
progress.style.width=`${progressPercent}%`;

constdurationMinutes=Math.floor(duration/60);
letdurationSeconds=Math.floor(duration%60);
if(durationSeconds){
durationEl.textContent=`${durationMinutes}: ${durationSeconds}`;
}
constcurrentMinutes=Math.floor(currentTime/60);
letcurrentSeconds=Math.floor(currentTime%60);
if(currentSeconds<10){
currentSeconds=`0${currentSeconds}`
}
currentTimeEl.textContent=`${currentMinutes}: ${currentSeconds}`
}

functionsetProgressBar(event){
constwidth=this.clientWidth;
constclickX=event.offsetX;
const{duration}=music;
music.currentTime=(clickX/width)*duration;
}

functionsetVolume(value){
music.volume=value;
}

progressContainer.addEventListener('click',setProgressBar);
music.addEventListener('timeupdate',updateProgressBar);
music.addEventListener('ended',nextSong);
prevBtn.addEventListener('click',prevSong);
nextBtn.addEventListener('click',nextSong);