-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
248 lines (236 loc) · 16.9 KB
/
index.html
File metadata and controls
248 lines (236 loc) · 16.9 KB
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voxity - plays music.</title>
<script>
const banner = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 80">
<path fill="#8000ff" transform="scale(0.1) translate(0, 40)" d="M87.9 11.5c-11.3-6.9-26.1-3.2-33 8.1-24.8 41-39 89.1-39 140.4s14.2 99.4 39 140.4c6.9 11.3 21.6 15 33 8.1s15-21.6 8.1-33C75.7 241.9 64 202.3 64 160S75.7 78.1 96.1 44.4c6.9-11.3 3.2-26.1-8.1-33zm400.1 0c-11.3 6.9-15 21.6-8.1 33 20.4 33.7 32.1 73.3 32.1 115.6s-11.7 81.9-32.1 115.6c-6.9 11.3-3.2 26.1 8.1 33s26.1 3.2 33-8.1c24.8-41 39-89.1 39-140.4S545.8 60.6 521 19.6c-6.9-11.3-21.6-15-33-8.1zM320 215.4c19.1-11.1 32-31.7 32-55.4 0-35.3-28.7-64-64-64s-64 28.7-64 64c0 23.7 12.9 44.4 32 55.4L256 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-264.6zM180.2 91c7.2-11.2 3.9-26-7.2-33.2s-26-3.9-33.2 7.2c-17.6 27.4-27.8 60-27.8 95s10.2 67.6 27.8 95c7.2 11.2 22 14.4 33.2 7.2s14.4-22 7.2-33.2c-12.8-19.9-20.2-43.6-20.2-69s7.4-49.1 20.2-69zM436.2 65c-7.2-11.2-22-14.4-33.2-7.2s-14.4 22-7.2 33.2c12.8 19.9 20.2 43.6 20.2 69s-7.4 49.1-20.2 69c-7.2 11.2-3.9 26 7.2 33.2s26 3.9 33.2-7.2c17.6-27.4 27.8-60 27.8-95s-10.2-67.6-27.8-95z"/>
<text x="70" y="35" font-family="GSansFlex, sans-serif" font-size="28" font-weight="bold" fill="#8000ff">Voxity</text>
<text x="70" y="55" font-family="GSansFlex, sans-serif" font-size="13" font-style="italic" fill="#888">plays music.</text>
</svg>`;
console.log(
'%c ',
`background-image: url("data:image/svg+xml,${encodeURIComponent(banner)}"); background-size: contain; background-repeat: no-repeat; padding: 40px 200px; display: block;`
);
console.log('Welcome to the console of Voxity! Not a whole lot goes on here, but you can do a lot by executing some code!');
console.log('You can create a modal by running %cmsg%c("Content here", "Title here"), plus two booleans (true/false), the first if close buttons should be present (ESC still works), and the second if you can drag the box', 'color: #ff4444; font-family: monospace', '');
console.log('You can show the error toast by running %cthrow_error%c("message"), plus a true/false whether to show success or error (true: success)', 'color: #ff4444; font-family: monospace', '');
console.log('For further exploration, the source code is at https://github.com/exerinity/voxity');
console.log('%ci really need to make a documentation of this thing...', 'color: #666;font-size: 10px')
console.log('Happy tweaking!! :3');
console.log('%c---------------------------------------------------------------------------', 'color: #666');
console.log('Also, follow me on %cTwitter%c: https://twitter.com/exerinity_ for updates!', 'color: #1DA1F2;', 'color: #FFF;'); // no fuckin clue what it actually uses so fuck it FFF it is motherfucker
</script>
<link rel="stylesheet" href="/app/stylesheets/controls.css">
<link rel="stylesheet" href="/app/stylesheets/miscellaneous.css">
<link rel="stylesheet" href="/app/stylesheets/structure.css">
<link rel="stylesheet" href="/app/stylesheets/tandem.css">
<link rel="stylesheet" href="/app/stylesheets/themes.css">
<link rel="stylesheet" href="/app/stylesheets/fontawesome.css">
<script src="/app/scripts/library/jsmediatags.js" defer></script>
<script src="/app/scripts/management/pwa.js" defer></script>
<script src="/app/scripts/ui/modal.js" defer></script>
<script src="/app/scripts/miscellaneous/router.js" defer></script>
<meta name="description" content="A semi-advanced PWA music player that supports any audio file your browser does">
<meta name="keywords" content="music, player, audio, web audio api, visualizer, lyrics, jsmediatags">
<meta name="author" content="exerinity.com">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#111111">
<link rel="icon" type="image/png" href="/app/media/voxity.ico">
<link rel="apple-touch-icon" href="/app/media/voxity.png">
<link rel="canonical" href="https://voxity.dev/">
</head>
<body>
<main>
<audio src="/app/media/sfx/welcome.ogg" id="welcomesound" preload="auto"></audio>
<audio src="/app/media/sfx/error.ogg" id="errsound" preload="auto"></audio>
<audio src="/app/media/sfx/message.ogg" id="msgsound" preload="auto"></audio>
<audio src="/app/media/sfx/done.ogg" id="donesound" preload="auto"></audio>
<audio src="/app/media/sfx/time.ogg" id="timesound" preload="auto"></audio>
<div id="preemptive_warn"
style="background: var(--dialog-bg);color: var(--fg);border-radius: 16px;box-shadow: rgba(0, 0, 0, 0.18) 0px 4px 32px;padding: 2rem 2.5rem 1.5rem;max-width: 720px;width: 90vw;position: fixed;font-family: inherit;text-align: center;animation: 0.2s ease 0s 1 normal none running zin;left: 50%;top: 50%;transform: translate(-50%, -50%);">
<div
style="position: absolute; top: 12px; left: 16px; font-size: 1.2rem; font-weight: bold; color: var(--fg); cursor: move; display: flex; align-items: center; height: 24px; user-select: none;">
<i class="fa-solid fa-tower-broadcast" style="color: var(--lyric-color); margin-right: 0.5em;"></i>
Voxity
</div>
<div style="margin-top: 0.5rem; font-size: 1.08rem; line-height: 1.6;">
<div style="margin-bottom:1rem; cursor: default;" id="rescue">
<script
type="text/javascript">document.write(`Something broke trying to load Voxity. Make sure
JavaScript is enabled and that "/app/scripts/management/initialize.js" can be accessed (i.e., you are not blocking it) before
refreshing. If that still fails, perform a hard refresh with CTRL/Command+Shift+R or <a
href="/?cachebuster=9999999999999999999999">try a cache buster</a>.
<br><small>PS: Even if you don't see this, everything might still be broken. Good luck, comrade. This
message is only removed by initialize.js once the page loads. More can go wrong and this box won't catch
it.</small><hr>JavaScript is <strong style="color:green;">enabled</strong>. <a href="/app/scripts/management/initialize.js" target="_blank">Please check /app/scripts/management/initialize.js is accessible</a>.<br><a href="https://exerinity.com/email">I need help!</a>`);</script>
<noscript>JavaScript is <strong style="color:red;">disabled</strong>. Please enable it to continue.
<a href="https://support.google.com/adsense/answer/12654?hl=en" target="_blank">Learn
how...</a></noscript>
</div>
</div>
</div>
<div id="app" class="hidden">
<div class="header">
<h3 id="status"></h3>
<div id="branding" style="cursor: help"></div>
</div>
<div class="main">
<div class="left" id="dropzone">
<div class="inputs">
<div class="inputg">
<label for="upload">Upload audio files, or subtitles...</label>
<input id="upload" type="file" class="files" multiple>
</div>
</div>
<audio id="player" crossorigin="anonymous" class="hidden" loop></audio>
<div class="metadata">
<img id="cover-art" class="hidden" alt="Cover art">
<div>
<p id="np"></p>
<div class="track">
<h1 id="np2" class="track-title"></h1>
<h2 id="artist" class="track-artist"></h2>
<p id="album" class="track-album"></p>
</div>
</div>
</div>
<div class="controls">
<button id="prevtrack" title="Previous track" class="bop"><i
class="fa-solid fa-step-backward"></i></button>
<button id="rwd" title="Rewind 10s" class="bop"><i class="fa-solid fa-backward"></i></button>
<button id="plps" title="Play/pause" class="bop"><i class="fa-solid fa-play"></i></button>
<button id="fwd" title="Forward 10s" class="bop"><i class="fa-solid fa-forward"></i></button>
<button id="nexttrack" title="Next track" class="bop"><i
class="fa-solid fa-step-forward"></i></button>
<button id="stop" title="Restart the track at 0:00" class="bop"><i
class="fa-solid fa-arrow-rotate-left"></i></button>
<button id="shuffle" title="Toggle shuffle"><i class="fa-solid fa-shuffle"></i></button>
<button id="loop" title="Toggle loop"><i class="fa-solid fa-repeat"></i></button>
<button id="clearqueue" title="Clear queue"><i class="fa-solid fa-trash"></i></button>
<button id="open_sleep_timer_modal" class="bop" title="Manage the sleep timer">
<i class="fa-solid fa-moon"></i> <span id="sleep_timer_button_label"></span>
</button>
<button onclick="openQueueSearchModal()" title="Search items in the queue"><i
class="fa-solid fa-search"></i></button>
</div>
<div class="controls">
<button id="settings" title="Open settings"><i class="fa-solid fa-gear"></i>
Settings</button>
<button id="searchlrclib" title="Search LRCLIB for lyrics" class="bop"><i
class="fa-solid fa-search"></i> Search lyrics</button>
<button id="pastelrc" title="Paste your own LRC lyrics" class="bop"><i
class="fa-solid fa-paste"></i> Modify lyrics</button>
<button id="hotkeys" class="bop" title="View a list of hotkeys / keyboard shortcuts"><i
class="fa-solid fa-keyboard"></i> Hotkeys</button>
<button onclick="relnote()" class="bop" title="See what's new and what's changed"><i
class="fa-solid fa-scroll"></i> Release
notes</button>
<button onclick="pwamsg()" id="installpwa" class="bop hidden" title="Install Voxity as an app"><i
class="fa-solid fa-download"></i>
Install</button>
</div>
<div class="sliders">
<div class="slidez">
<label for="volume" id="volc" title="Click to open a modal for precise input">Volume</label>
<div class="main_slide">
<span id="vol-min">0</span>
<div class="range-wrapper">
<input id="volume" type="range" min="0" max="2" step="0.01" value="2">
<span id="volume-tooltip" class="tooltip hidden"></span>
</div>
<span id="vol-max">1</span>
</div>
</div>
<div class="slidez">
<label for="speed" id="speedc" title="Click to open a modal for precise input">Speed</label>
<div class="main_slide">
<span id="spd-min">0.1x</span>
<div class="range-wrapper">
<input id="speed" type="range" min="0.1" max="2" step="0.1" value="1">
<span id="speed-tooltip" class="tooltip hidden"></span>
</div>
<span id="spd-max">2.0x</span>
</div>
</div>
</div>
<div class="sliders">
<div class="slidez">
<label for="index" id="prog"
title="Click to open a modal for precise input">Scrubber</label>
<div class="main_slide">
<span id="time-current">--:--</span>
<div class="range-wrapper">
<input id="index" type="range" min="0" max="100" value="0">
<span id="index-tooltip" class="tooltip hidden"></span>
</div>
<span id="time-duration">--:--</span>
</div>
</div>
</div>
<div class="viz_sec">
<canvas id="visualizer" style="cursor: pointer;" title="Click to change mode..."></canvas>
<input id="viz-mode" type="hidden" value="spectrum">
</div>
</div>
<div class="right" id="droppedzone">
<div id="lyrics" class="lyrics-container"></div>
<div class="queue-header"
style="position: sticky; top: 0; background: #00000000; z-index: 2; backdrop-filter: blur(2px);">
<h3 style="margin:0; cursor:pointer;"
title="Primary click to recalculate the queue, secondary click to jump to the track that's playing, middle click to search"
id="queuehead">Queue (0 tracks, --:--)</h3>
</div>
<div id="queue-container" class="queue-container">
<ul id="queue-list" class="queue-list">
<li class="queue-item placeholder">The queue is empty <i
class="fa-solid fa-tower-broadcast fa-beat bop"></i></li>
</ul>
</div>
</div>
</div>
<div id="error" class="hidden"></div>
</div>
</main>
<script src="/app/scripts/management/settings.js" defer></script>
<script src="/app/scripts/management/initialize.js"></script>
<script src="/app/scripts/management/hotkeys.js" defer></script>
<script src="/app/scripts/management/elementmap.js" defer></script>
<script src="/app/scripts/management/sleeptimer.js" defer></script>
<script src="/app/scripts/management/tabtitle.js" defer></script>
<script src="/app/scripts/management/play.js"></script>
<script src="/app/scripts/management/notifications.js" defer></script>
<script src="/app/scripts/management/wakelock.js" defer></script>
<script src="/app/scripts/audio/analyzer.js" defer></script>
<script src="/app/scripts/audio/event.js" defer></script>
<script src="/app/scripts/audio/visualizer.js" defer></script>
<script src="/app/scripts/queue/handler.js" defer></script>
<script src="/app/scripts/queue/render.js" defer></script>
<script src="/app/scripts/queue/drag.js" defer></script>
<script src="/app/scripts/queue/shuffle.js" defer></script>
<script src="/app/scripts/queue/loading.js" defer></script>
<script src="/app/scripts/queue/utilities.js" defer></script>
<script src="/app/scripts/queue/statuses.js"></script>
<script src="/app/scripts/queue/detersubtitles.js" defer></script>
<script src="/app/scripts/lyrics/engine.js" defer></script>
<script src="/app/scripts/lyrics/metadata.js" defer></script>
<script src="/app/scripts/lyrics/source.js" defer></script>
<script src="/app/scripts/lyrics/searchlyrics.js" defer></script>
<script src="/app/scripts/lyrics/pastelyrics.js" defer></script>
<script src="/app/scripts/ui/controls.js" defer></script>
<script src="/app/scripts/ui/error.js" defer></script>
<script src="/app/scripts/ui/inputmodal.js" defer></script>
<script src="/app/scripts/ui/preferences.js" defer></script>
<script src="/app/scripts/ui/textscroller.js" defer></script>
<script src="/app/scripts/ui/clicktocopy.js" defer></script>
<script src="/app/scripts/ui/hello.js" defer></script>
<script src="/app/scripts/ui/status.js"></script>
<script src="/app/scripts/miscellaneous/formathelp.js"></script>
<script src="/app/scripts/miscellaneous/mediasession.js" defer></script>
<script src="/app/scripts/miscellaneous/pwachecker.js" defer></script>
<script src="/app/scripts/miscellaneous/releasenotes.js" defer></script>
<script src="/app/scripts/miscellaneous/statictext.js" defer></script>
</body>
</html>