-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (90 loc) · 6.63 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
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
<!DOCTYPE html>
<html>
<head>
<title>🜃</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
align-items: center;
justify-content: center;
display: flex;
text-transform: uppercase;
}
.info {
width: 100vw;
position: absolute;
bottom: 0;
text-align: center;
text-transform: none;
font-size: smaller;
}
.playing { background: #000; color: #fff; }
.playing #textElement { display: none; }
a, a:visited, a:active {
text-decoration: none; cursor: pointer;
color: inherit;
}
</style>
</head>
<body>
<h1 id="textElement">Buffering audio. Please wait...</h1>
<p class="info"><a href="https://twitter.com/shinmai">'zik & code, @shinmai</a>, 2018<br />❤ Wear headphones ❤ Be mindful of playback volume ❤</p>
<script type="text/javascript">
"use strict";
const anicon = (function() {
"use strict";
const frames = JSON.parse(atob("WyJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUJBQUFBQVFCQU1BQUFEdDNlSlNBQUFBRlZCTVZFWDRwQ3ovL3ZuKzhwNzg0bUg2MERmblVCY2hJMFFuQUFxaUFBQUFia2xFUVZRSTF4M05NUTZEUUF4RTBYSGk5RHRJNlJNamNRQXNVVnRpRDVCbUw0QVE5ejlDYkthWjEzMlFMVUpJc0pGZlN1SmgwMlFmb3RrOVFadnJWOEhUMTRRRDhNTnNLZWhoOHhMQVVIZnZNVEIrZStLVjBINXVoYWJYZGw0UXZMSDNIZ2tDcWtCRmthdG9TY2cva0JFUDh2OVhBZEFBQUFBQVNVVk9SSzVDWUlJPSIsImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQkFBQUFBUUJBTUFBQUR0M2VKU0FBQUFGVkJNVkVYNHBDei8vdm4rOHA3NXpUajg0bUhuVUJja0prS0o3c205QUFBQWJrbEVRVlFJMXkzTndRM0NRQXhFMFRHRyswNW9BQ3lVODBvT0tRRGNBZG9HUXBUK1M0ZzN5ais5MndkWnZBb0pGdkpKU1Z4c0dPeEJGRHVTRXgvQk5TSVJBR0l4R3p0MHNkZFlnYVlSNGJXaC9hYkVPNkUrZi8rM2hxTGJ1czBRM0RHNTF3UUJWYUJQa1VtaVM4Z2RwSkVRRnlYM1FLTUFBQUFBU1VWT1JLNUNZSUk9IiwiZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFCQUFBQUFRQkFNQUFBRHQzZUpTQUFBQUZWQk1WRVg0cEN6Ly92bis4cDc1elRqODRtRG5VQmNrSmtHMmtKT3pBQUFBY0VsRVFWUUkxeTNOTVE3Q1FBeEUwVEdHZmllSUhpeVVlaVV2cVJINEJtZ3ZrRWk1L3hId0luNzF1Zyt5ZUJVU0xPU05rampZTk5tVktQWkwvbmdKamhHSkFCQ3IyVHlncTkzbkNuU05pSGZ0Nko4VzRZK0VldHVXVThkRjkzM1pJRGlqdWRjRWdhY0NZNHBNRWtOQ2ZnR3NBUkJaS1crRHJRQUFBQUJKUlU1RXJrSmdnZz09IiwiZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFCQUFBQUFRQkFNQUFBRHQzZUpTQUFBQUZWQk1WRVg0cEN6Ly92bis4cDc1elRqODRtRG5VQmNqSlQ4dlQ0ck9BQUFBY2tsRVFWUUkxeDNOTVE3Q1FBeEUwYkVNL1U0UVBWaFI2aFZlcU5IS29xYlpDeVJTN244RUhLYjVyeHVReGF1UVlDSHZsTVREcHNsdXhOWCtFNVQ1YUJlY29pY0MwRmpObGtCcXRYbXB3TkRvNFhWZ2ZGdUVQeE82dFkrZkI0cSs5bTJINElMbVhoTUUzZ285VHBHVFJDckxIOE8xRUlyQUhoSk9BQUFBQUVsRlRrU3VRbUNDIiwiZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFCQUFBQUFRQkFNQUFBRHQzZUpTQUFBQUZWQk1WRVg0cEN6Ly92bis4cDc1eWpmODRsL25VQmNqSlQrcFZCRjdBQUFBY1VsRVFWUUkxeTNOTVE2RFFBeEUwYkdjOUR2S0JiSldSTDJLU1E0UXJOUTBld0dRdVA4Uk1JaGZ2ZTZETE42RUJFc2xLWWwzcldaUG90aVpYUGdKYmhHSkFEUVdzeUV4NjJLdm9RRmRJMkpxSFgwZUkveVQwTDlQNjcyajZMcHQzeVo0WUhSdkVCQndCWTRwTWtrY0VuSUg5aGNSTkhZN2E3MEFBQUFBU1VWT1JLNUNZSUk9IiwiZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFCQUFBQUFRQkFNQUFBRHQzZUpTQUFBQUZWQk1WRVg0cEN6Ly92bis4cDc1eWpmODRsL25VQmNqSlQrcFZCRjdBQUFBY2tsRVFWUUkxeTNOTVE3Q1FBeEUwYkVXK3AyQ25yVlE2aFVPT1FEeEFaQ1FMNUJJdWY4UjhLTDg2bW1hQVZtdEN3bldSbElTejlaVTcwVFZmM0xpTGJpNEp4d292cWxPaVUvWjlERjFJSXE3cnowUTM5bmRYakdXZlYydWdWcU81ZGk3NEliWnJFTkF3QW93VHBGSllraklIL2RIRVRvSjZJTzRBQUFBQUVsRlRrU3VRbUNDIiwiZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFCQUFBQUFRQkFNQUFBRHQzZUpTQUFBQUZWQk1WRVg0cEN6Ly92bis4cDc1eWpmODRsL25VQmNqSlQrcFZCRjdBQUFBYjBsRVFWUUkxeTNOd1EzQ1FBeEUwYkVNOTUwT1dBdmxiT0dRQW9nTHlHVWJDQ2o5bDRDRCtLZDNtZ0had29VRVd5Y3BoVWZ2WmplaTJTLzU0eVc0WkJZUzBOek5wc0ttdTkwbkI0Wm01dW9EWTVzejQxbkFlMW5qT3RCMCtSeUgxdzdtQ0llQVFDaHducUtTd2lraHYvSUxFUi9OYTl4SkFBQUFBRWxGVGtTdVFtQ0MiLCJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUJBQUFBQVFCQU1BQUFEdDNlSlNBQUFBRlZCTVZFWDRwQ3ovL3ZuKzhwNzV5amY4NGwvblVCY2pKVCtwVkJGN0FBQUFiMGxFUVZRSTF5M05NUTdDUUF4RTBiRU0vYzROV0F1bHRuQzRBRmlwMCt3RkVpbjNQd0lPeXE5ZU5RT3loUXNKdGs1U0NxL2V6UjVFczM5eTRTTzRaUllTME56TXBzS3FtejBuQjRabTV0Y0h4anBueHJ1QUpmYTREelRkaitYdzJzRWM0UkFRQ0FYT1UxUlNPQ1hrRC9TQ0VTNWFrQmRQQUFBQUFFbEZUa1N1UW1DQyJd")) // base64 encoded JSON of an array of PNG frames
let currentFrame = 0, lastTime = 0
function update(src) {
let link = document.createElement('link'), oldLink = document.getElementById('animfav')
link.id = 'animfav'
link.rel = 'shortcut icon'
link.href = src
if (oldLink) document.head.removeChild(oldLink)
document.head.appendChild(link)
}
const animate = (time) => {
if (time > lastTime + 0.1) {
update(frames[currentFrame])
currentFrame++
if(currentFrame == frames.length)
currentFrame = 0;
requestAnimationFrame(animate);
lastTime = time;
return;
}
}
update(frames[0])
return { play: function() {requestAnimationFrame(animate)}}
}()) // animated favicon end
const gapless = (function() {
"use strict";
const audio_file = new Audio('roller.mp3'), // relative path to audio file
startPoint = 0.0125, // amount of garbage samples at beginning of file
endPoint = 0.3145, // amount of garbage samples at end of file
textElement = document.getElementById('textElement'),
loadedHandler = (e) => {
audio_file.removeEventListener(e.type, loadedHandler)
document.addEventListener('click', startPlayback)
textElement.innerText = 'click/tap to begin'
},
startPlayback = (e) => {
document.removeEventListener(e.type, startPlayback)
audio_file.play()
document.body.className = 'playing'
anicon.play();
},
timerCheck = (e) => {
if(audio_file.currentTime > audio_file.duration - endPoint) {
audio_file.currentTime = startPoint
audio_file.play()
}
}
audio_file.addEventListener('canplaythrough', loadedHandler, false)
audio_file.addEventListener('timeupdate', timerCheck, false)
}()); // gapless playback end
</script>
</body>
</html>