-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
94 lines (83 loc) · 2.81 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
const music = document.querySelector('audio');
const image = document.getElementById('image');
const title = document.getElementById('title');
const artist = document.getElementById('artist');
const progressContainer = document.getElementById('progress-container');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
const playBtn = document.getElementById('play');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const voluBtn = document.getElementById('volumeIcon');
function loadSongs(song){
image.src = `img/${song.name}.jpg`;
music.src = `music/${song.name}.mp3`;
title.textContent = song.displayName;
artist.textContent = song.artist;
}
loadSongs(songs[0]);
let isPlaying = false;
function playSong(){
isPlaying = true;
music.play();
playBtn.classList.replace('fa-play', 'fa-pause');
voluBtn.classList.replace('fa-volume-down', 'fa-volume-up');
}
function pauseSong(){
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()));
let i = 0;
function nextSong(){
playBtn.classList.replace('fa-play', 'fa-pause');
isPlaying = true;
i++;
if(i > songs.length - 1){
i = 0;
}
loadSongs(songs[i]);
playSong();
}
function prevSong(){
playBtn.classList.replace('fa-play', 'fa-pause' );
isPlaying = true;
i--;
if(i < 1){
i = songs.length - 1;
}
loadSongs(songs[i]);
playSong();
}
function updateProgressBar(event){
const {currentTime, duration } = event.srcElement;
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;
const durationMinutes = Math.floor(duration / 60);
let durationSeconds = Math.floor(duration % 60);
if(durationSeconds){
durationEl.textContent = `${durationMinutes}: ${durationSeconds}`;
}
const currentMinutes = Math.floor(currentTime / 60);
let currentSeconds = Math.floor(currentTime % 60);
if(currentSeconds < 10){
currentSeconds = `0${currentSeconds}`
}
currentTimeEl.textContent = `${currentMinutes}: ${currentSeconds}`
}
function setProgressBar(event){
const width = this.clientWidth;
const clickX = event.offsetX;
const {duration} = music;
music.currentTime = (clickX / width) * duration;
}
function setVolume(value) {
music.volume = value;
}
progressContainer.addEventListener('click', setProgressBar);
music.addEventListener('timeupdate', updateProgressBar);
music.addEventListener('ended', nextSong);
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);