-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
147 lines (133 loc) · 4.2 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
const image = document.querySelector('img');
const title = document.getElementById('title');
const artist = document.getElementById('artist');
const music = document.querySelector('audio');
const progressContainer = document.getElementById('progress-container');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
const progress = document.getElementById('progress');
const prevBtn = document.getElementById('prev');
const playBtn = document.getElementById('play');
const nextBtn = document.getElementById('next');
// Music
const songs = [
{
name: 'So Good To Me',
imgName: 'good2me',
displayName: 'So Good To Me',
artist: 'Chris Malinchak',
},
{
name: 'Guru Josh Project - Infinity',
imgName: 'infinity',
displayName: 'Infinity (Ultra Music)',
artist: 'Guru Josh Project',
},
{
name: 'Hometown - Twenty One Pilots',
imgName: 'darkTown',
displayName: 'Hometown',
artist: 'Twenty One Pilots',
},
{
name: 'It is Yours (Ft. Tia London)',
imgName: 'yours',
displayName: 'It is Yours',
artist: 'Twista Ft. Tia London',
},
{
name: 'Mr Probz - Waves',
imgName: 'waves1',
displayName: 'Waves',
artist: 'Mr Probz',
},
{
name: 'No Pressure (Feat. Big Sean)',
imgName: 'propose',
displayName: 'No Pressure',
artist: 'Justin Bieber Feat. Big Sean',
}
];
// Check if playing song
let isPlaying = false;
// Play
function playSong() {
isPlaying = true;
playBtn.classList.replace('fa-play', 'fa-pause');
playBtn.setAttribute('title', 'Pause');
music.play();
}
// Pause
function pauseSong() {
isPlaying = false;
playBtn.classList.replace('fa-pause', 'fa-play');
playBtn.setAttribute('title', 'Play');
music.pause();
}
// Play or Pause Event Listener
playBtn.addEventListener('click', () => (isPlaying ? pauseSong() : playSong()));
// Update DOM
function loadSong(song) {
title.textContent = song.displayName;
artist.textContent = song.artist;
music.src = `music/${song.name}.mp3`;
image.src = `img/${song.imgName}.jpg`;
}
// Current Song
let songIndex = 0;
// Next Song
function nextSong() {
songIndex++;
if(songIndex > songs.length-1) { songIndex = 0; }
loadSong(songs[songIndex]);
playSong();
}
// Previous Song
function prevSong() {
songIndex--;
if(songIndex < 0) { songIndex = songs.length - 1; }
loadSong(songs[songIndex]);
playSong();
}
// On Load - Select First Song
loadSong(songs[songIndex]);
// Update Progress Bar & Time
function updateProgressBar(e) {
if(isPlaying) {
const { duration, currentTime } = e.srcElement;
// Update progress bar width
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;
// Calculate display for duration
const durationMinutes = Math.floor(duration / 60);
let durationSeconds = Math.floor(duration % 60);
if(durationSeconds < 10) {
durationSeconds = `0${durationSeconds}`;
}
durationEl.textContent = `${durationMinutes}:${durationSeconds}`;
// Delay switching duration Element to avoid NaN
if(durationSeconds) {
durationEl.textContent = `${durationMinutes}:${durationSeconds}`;
}
// Calculate display for duration
const currentMinutes = Math.floor(currentTime / 60);
let currentSeconds = Math.floor(currentTime % 60);
if(currentSeconds < 10) {
currentSeconds = `0${currentSeconds}`;
}
currentTimeEl.textContent = `${currentMinutes}:${currentSeconds}`;
}
}
// Set Progress Bar
function setProgressBar(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const { duration } = music;
music.currentTime = (clickX/width) * duration;
}
// Event Listeners
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
music.addEventListener('ended', nextSong);
music.addEventListener('timeupdate', updateProgressBar);
progressContainer.addEventListener('click', setProgressBar);