-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
57 lines (57 loc) · 3.31 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>♫Dementiawave</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,700,0,200" />
<meta charset="utf-8" />
</head>
<body>
<div id="cover_large_div"></div>
<section id="tracklist"></section>
<div id="player"></div>
<div id="readme">
<p>
I began building this playlist from nothingness years ago. 2017, maybe. Since then, this has
become to me a sort of personal zen garden. I've seen this playlist grow slowly and organically over the years.
Whenever I carefully choose where to plant a song or an album based on sound or theme or visuals or unlikely coincidences,
or when I fix a broken link and bring the music back from silence, or when I make a semi-calculated rearrangement to an existing collection of sounds, I really
do feel like a gardener full of fatherly care doing loving maintenance work for his ever sprouting greens and reds and purples.
To my permanent surprise, this playlist has become large enough that it sometimes feels like an entity with
a sort of life of its own, again like a thriving garden turned ecosystem that makes half the decisions as to
where or why seemingly by itself. I find it in many ways a reflection of my self, too; oddly one that I'm somewhat proud of.
</p>
<p>
This website, sadly, uses Youtube's iframe API to play music. Otherwise, it was built from scratch using
plain HTML, CSS, and again, sadly, JS. It is unusable without a proper ad-blocker.
If we ever lose the ad-blocking battle to Google (very unlikely), I'll make sure to disable all functionality related to the API.
At that point the site would become a mere frontend for my playlist's metadata backup, but that might
honestly be good enough.
</p>
<ul>
<li id="kb_controls">Keyboard controls</span></li>
<li>- A-D to play previous/next track</li>
<li>- S-W to lower/increase volume by 5%</li>
<li>- Q-E to go back/fast-forward 5 seconds</li>
<li>- R to restart the currently playing track</li>
<li>- Spacebar to toggle pause</li>
<li>- M to toggle mute</li>
<li>- X to toggle replay</li>
<li>- Z to toggle shuffle</li>
<li>- Tab to autoscroll to the currently playing track</li>
<li>- Any sequence of digits followed by Enter to jump to the track of index specified by the sequence</li>
<li>- Any sequence of digits followed by Period (.) to jump to the fraction of the current track's duration specified by the sequence</li>
<li>- Backspace to reset the logged sequence of digits</li>
<li>- P to add or remove the currently playing track to a custom playlist</li>
<li>- Esc to delete the current custom playlist</li>
<li id="hidden_li">- Yes, it is really easy to make a keylogger using Javascript.</li>
</ul>
<p id="playlist_duration"></p>
</div>
<div id="played_bar_bg">
<div id="played_bar"></div>
</div>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>