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
|
Object.defineProperty(Array.prototype, "shuffle", {
value: function () {
for (let i = this.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[this[i], this[j]] = [this[j], this[i]];
}
return this;
},
});
const tracks = Object.entries(playlistTracks)
.map((track) => track[1])
.shuffle();
const controls = document.querySelector(".controls");
const audio = document.querySelector("#audio");
const trackTitle = document.querySelector("#track-title");
const trackArtist = document.querySelector("#track-artist");
const albumArt = document.querySelector("#album-art");
const minElap = document.querySelector("#min-elap");
const secElap = document.querySelector("#sec-elap");
const minDur = document.querySelector("#min-dur");
const secDur = document.querySelector("#sec-dur");
let currentTrack = 0;
const loadAudio = new Promise((resolve, reject) => {
audio.addEventListener("canplaythrough", () => {
resolve(audio);
});
});
async function playAudio() {
audio.src = tracks[currentTrack].location;
const duration = audio.duration;
audio.play().catch((e) => {
window.addEventListener(
"click",
() => {
controls.click();
audio.play();
},
{ once: true }
);
});
return audio;
}
function pauseAudio() {
audio.pause();
}
function nextTrack() {
currentTrack = (currentTrack + 1) % tracks.length;
audio.currentTime = 0;
playTrack();
}
function playTrack() {
const track = tracks[currentTrack];
trackTitle.textContent = track.title;
trackArtist.textContent = track.artist;
albumArt.src = track.cover_art;
playAudio().then((audio) => {
audio.addEventListener("ended", nextTrack);
});
}
function updateIntervals() {
const duration = audio.duration;
const currentTime = audio.currentTime;
const elapsed = Math.floor(currentTime);
const total = Math.floor(duration);
const minutesElapsed = Math.floor(elapsed / 60);
const secondsElapsed = elapsed % 60;
const minutesTotal = Math.floor(total / 60) || 0;
const secondsTotal = total % 60 || 0;
minElap.textContent =
minutesElapsed < 10 ? `0${minutesElapsed}` : minutesElapsed;
secElap.textContent =
secondsElapsed < 10 ? `0${secondsElapsed}` : secondsElapsed;
minDur.textContent = minutesTotal < 10 ? `0${minutesTotal}` : minutesTotal;
secDur.textContent = secondsTotal < 10 ? `0${secondsTotal}` : secondsTotal;
}
function togglePlayPause() {
const buttons = Array.from(this.children);
let triggeredButton;
buttons.forEach((button) => {
if (!button.classList.contains("hidden")) {
triggeredButton = button;
}
button.classList.toggle("hidden");
});
signalTrigger(triggeredButton);
}
function signalTrigger(button) {
const role = button.getAttribute("role");
switch (role) {
case "play":
playAudio();
break;
case "pause":
pauseAudio();
break;
}
}
audio.currentTime = 0;
controls.addEventListener("click", togglePlayPause);
audio.addEventListener("timeupdate", updateIntervals);
playTrack();
|
