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
|
let audio = document.createElement("audio");
let tick;
async function mpFetchAsync (url) {
let response = await fetch(url);
let data = await response.json();
return data;
}
function mpFormatTime (number) {
let min = Math.floor(number / 60);
let sec = Math.floor(number - min * 60);
if (min < 10) { min = "0" + min; }
if (sec < 10) { sec = "0" + sec; }
return min + ":" + sec;
}
function mpTick () {
if (audio.currentTime >= audio.duration) {
mpNext();
}
let seek = document.getElementById("mp_seek_slider");
let current = document.getElementById("mp_current_time");
let duration = document.getElementById("mp_total_duration");
let seekPos = 0;
if (!isNaN(audio.duration)) {
seekPos = audio.currentTime * (100 / audio.duration);
seek.value = seekPos;
current.textContent = mpFormatTime(audio.currentTime);
duration.textContent = mpFormatTime(audio.duration); // This shouldn't be necessary but initial update doesn't always work???
}
}
function mpSeek () {
const seek = document.getElementById("mp_seek_slider");
const goal = audio.duration * (seek.value / 100);
audio.currentTime = goal;
}
async function mpUpdate () {
clearInterval(tick);
const trackSelector = document.getElementById("mp_tracks");
const trackName = trackSelector.value;
let duration = document.getElementById("mp_total_duration");
duration.textContent = mpFormatTime(audio.duration);
audio.src = "/audio/get?file=" + trackName;
audio.currentTime = 0;
let ppButton = document.getElementById("mp_pp_track");
ppButton.innerHTML = "<img src='/static/get?file=images/play.svg' alt='Play'>";
tick = setInterval(mpTick, 1000);
}
function mpIsPlaying() {
return !audio.paused;
}
function mpPpTrack () {
let ppButton = document.getElementById("mp_pp_track");
if (mpIsPlaying()) {
audio.pause();
ppButton.innerHTML = "<img src='/static/get?file=images/play.svg' alt='Play'>";
} else {
audio.play();
ppButton.innerHTML = "<img src='/static/get?file=images/pause.svg' alt='Play'>";
}
}
function mpNext () {
let trackSelector = document.getElementById("mp_tracks");
const index = trackSelector.selectedIndex + 1;
if (index >= trackSelector.options.length) {
trackSelector.selectedIndex = 0;
} else {
trackSelector.selectedIndex = index;
}
mpUpdate();
mpPpTrack();
}
function mpPrevious () {
let trackSelector = document.getElementById("mp_tracks");
const index = trackSelector.selectedIndex - 1;
if (index < 0) {
trackSelector.selectedIndex = trackSelector.options.length - 1;
} else {
trackSelector.selectedIndex = index;
}
mpUpdate();
mpPpTrack();
}
const trackList = await mpFetchAsync("/audio");
let trackSelector = document.getElementById("mp_tracks");
trackList.forEach((track) => {
let option = document.createElement("option");
option.text = track;
trackSelector.add(option, 0);
});
document.getElementById("mp_tracks").addEventListener("change", mpUpdate, false);
document.getElementById("mp_seek_slider").addEventListener("change", mpSeek, false);
document.getElementById("mp_pp_track").addEventListener("click", mpPpTrack, false);
document.getElementById("mp_prev_track").addEventListener("click", mpPrevious, false);
document.getElementById("mp_next_track").addEventListener("click", mpNext, false);
mpUpdate();
|
