daydreamer-json/hp
0
1<!DOCTYPE html>
2<html lang='en'>
3 <head>
4 <title>test</title>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.00">
7 <meta name="robots" content="noindex,nofollow,noarchive">
8 <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
9 <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js" integrity="sha512-6+YN/9o9BWrk6wSfGxQGpt3EUK6XeHi6yeHV+TYD2GR0Sj/cggRpXr1BrAQf0as6XslxomMUxXp2vIl+fv0QRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
10 <script src="https://unpkg.com/siriwave/dist/siriwave.umd.min.js"></script>
11 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
12 <link href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css" rel="stylesheet" type="text/css" media="all">
13 <style>
14 .material-symbols-rounded {
15 font-variation-settings:
16 'FILL' 1,
17 'wght' 400,
18 'GRAD' 0,
19 'opsz' 48
20 }
21 html, body {
22 font-size: 100%;
23 }
24 table, th, td {
25 border-collapse: collapse;
26 white-space: nowrap;
27 border: 1px solid #000;
28 }
29 th {
30 background-color: rgba(255,255,255,0.3);
31 }
32 html, body {
33 color: #000;
34 margin: 0;
35 line-height: 1;
36 }
37 .main {
38 background: rgb(218,255,255);
39 background: linear-gradient(220deg, rgba(218,255,255,1) 0%, rgba(142,245,255,1) 100%);
40 }
41 hr {
42 border: 0 none;
43 height: 1.5px;
44 color: #000;
45 background-color: #000;
46 }
47 a {
48 color: #000;
49 }
50 .unavailable_text {
51 color: #808080;
52 }
53 .footer {
54 color: #000;
55 background: rgb(218,255,255);
56 background: linear-gradient(220deg, rgba(218,255,255,1) 0%, rgba(142,245,255,1) 100%);
57 }
58 .opening_anim {
59 color: #000;
60 }
61 @media (prefers-color-scheme: dark) {
62 table, th, td {
63 border: 1px solid #fff;
64 }
65 th {
66 background-color: rgba(0,0,0,0.3);
67 }
68 html, body, .main {
69 color: #fff;
70 background: rgb(0,43,51);
71 background: linear-gradient(220deg, rgba(0,43,51,1) 0%, rgba(0,101,128,1) 100%);
72 }
73 hr {
74 color: #fff;
75 background-color: #fff;
76 }
77 a {
78 color: #fff;
79 }
80 .unavailable_text {
81 color: #808080;
82 }
83 .footer {
84 color: #fff;
85 background: rgb(0,43,51);
86 background: linear-gradient(220deg, rgba(0,43,51,1) 0%, rgba(0,101,128,1) 100%);
87 }
88 .opening_anim {
89 color: #000;
90 }
91 }
92 th, td {
93 padding: 5px;
94 }
95 .title_head h1 {
96 margin: 0;
97 padding-top: 30px;
98 }
99 header {
100 text-align: center;
101 }
102 .content {
103 width: 100%;
104 overflow-x: scroll;
105 overflow-y: auto;
106 }
107 .content_table {
108 width: 10000px;
109 padding: 2px;
110 }
111 .main {
112 font-family: 'A-OTF UD Shin Go Pro', system-ui;
113 width: 100vw;
114 height: 100vh;
115 display: flex;
116 flex-direction: column;
117 position: absolute;
118 }
119 .footer audio {
120 width: 100vw;
121 }
122 .footer {
123 position: fixed;
124 width: 100vw;
125 bottom: 0%;
126 }
127 .playString {
128 /* text-decoration: underline; */
129 cursor: pointer;
130 }
131 .opening_anim {
132 font-family: 'A-OTF UD Shin Go Pro', system-ui;
133 position: fixed;
134 height: 100vh;
135 width: 100vw;
136 z-index: 500;
137 display: block;
138 background: rgb(218,255,255);
139 background: linear-gradient(220deg, rgba(218,255,255,1) 0%, rgba(142,245,255,1) 100%);
140 }
141 .opening_anim_image {
142 top: 50%;
143 left: 50%;
144 transform: translateY(-55%) translateX(-50%);
145 position: absolute;
146 display: none;
147 z-index: 520;
148 will-change: filter;
149 }
150 .opening_anim_image_f {
151 top: 50%;
152 left: 50%;
153 transform: translateY(-55%) translateX(-50%);
154 position: absolute;
155 width: 50vw;
156 display: none;
157 z-index: 520;
158 will-change: filter;
159 }
160 .opening_anim_image_shadow {
161 top: 50%;
162 left: 50%;
163 transform: translateY(-55%) translateX(-50%);
164 position: absolute;
165 display: none;
166 z-index: 519;
167 filter: blur(1.5vh);
168 opacity: 1;
169 will-change: filter;
170 }
171 .opening_anim_image_shadow_f {
172 top: 50%;
173 left: 50%;
174 transform: translateY(-55%) translateX(-50%);
175 position: absolute;
176 width: 50vw;
177 display: none;
178 z-index: 519;
179 filter: blur(1.5vh);
180 opacity: 1;
181 will-change: filter;
182 }
183 .opening_text {
184 top: 50%;
185 left: 50%;
186 transform: translateY(-55%) translateX(-50%);
187 width: 90vw;
188 position: absolute;
189 display: none;
190 z-index: 518;
191 will-change: filter;
192 }
193 .loading_database_text {
194 top: 50%;
195 left: 50%;
196 transform: translateY(-55%) translateX(-50%);
197 width: 90vw;
198 position: absolute;
199 display: none;
200 z-index: 610;
201 will-change: filter;
202 }
203 .loading_database_text_shadow {
204 top: 50%;
205 left: 50%;
206 transform: translateY(-55%) translateX(-50%);
207 width: 90vw;
208 position: absolute;
209 display: none;
210 z-index: 609;
211 filter: blur(1.5vh);
212 will-change: filter;
213 }
214 .opening_text_shadow {
215 top: 50%;
216 left: 50%;
217 transform: translateY(-55%) translateX(-50%);
218 width: 90vw;
219 position: absolute;
220 display: none;
221 z-index: 517;
222 filter: blur(1.5vh);
223 will-change: filter;
224 }
225 .opening_text_title, .opening_text_string, .loading_database_text_title {
226 text-align: center;
227 }
228 .opening_text_title {
229 font-weight: 700;
230 font-size: 110%;
231 letter-spacing: 0.15em;
232 margin: 2.25em auto 2.25em auto;
233 }
234 .opening_text_string p, .loading_database_text_title {
235 margin: 0.3em auto 0.3em auto;
236 line-height: 1.5;
237 }
238 @media screen and (max-width: 400px) {
239 .opening_anim_image {
240 height: 10vh;
241 }
242 .opening_anim_image_shadow {
243 height: 10vh;
244 }
245 }
246 @media screen and (min-width: 401px) {
247 .opening_anim_image {
248 height: 10vw;
249 }
250 .opening_anim_image_shadow {
251 height: 10vw;
252 }
253 }
254 .material-symbols-rounded {
255 display: block;
256 line-height: 0;
257 font-size: 20px;
258 text-decoration: none;
259 }
260 .ytlink {
261 text-decoration: none;
262 }
263
264
265
266 /* VISUALIZER */
267
268 </style>
269 <script>
270 // SYNC PLAY AUDIO SRC
271 const AUDIO_SOURCE = [
272 "https://cdn.jsdelivr.net/gh/daydreamer-json/sekai-assets@main/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001.mp3",
273 "https://cdn.jsdelivr.net/gh/daydreamer-json/sekai-assets@main/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001-1.mp3",
274 "https://cdn.jsdelivr.net/gh/daydreamer-json/sekai-assets@main/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001-2.mp3",
275 "https://cdn.jsdelivr.net/gh/daydreamer-json/sekai-assets@main/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001-3.mp3",
276 "https://cdn.jsdelivr.net/gh/daydreamer-json/sekai-assets@main/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001-4.mp3",
277 "https://cdn.jsdelivr.net/gh/daydreamer-json/sekai-assets@main/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001-5.mp3",
278 "https://cdn.jsdelivr.net/gh/daydreamer-json/sekai-assets@main/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001-6.mp3",
279 ];
280 var sound = new Array();
281 for (let i = 0; i < AUDIO_SOURCE.length; i++) {
282 let stereo_sep = ((AUDIO_SOURCE.length / (i + 1)) * 2 - 1);
283 sound.push(new Howl({
284 xhr: {
285 headers: {
286 Referer: AUDIO_SOURCE[i],
287 Origin: 'https://storage.sekai.best',
288 'sec-fetch-site': 'same-origin'
289 },
290 withCredentials: true
291 },
292 src: [AUDIO_SOURCE[i]],
293 stereo: stereo_sep,
294 loop: false
295 }));
296 };
297 function start () {
298 var clone = document.getElementById("siri-container").cloneNode(false);
299 document.getElementById("siri-container").parentNode.replaceChild(clone, document.getElementById("siri-container"));
300 /* var siriWave = new SiriWave({
301 container: document.getElementById("siri-container"),
302 autostart: true,
303 height: 128,
304 style: "ios9",
305 speed: 0.15,
306 amplitude: 1.5
307 }); */
308 document.getElementById("start_btn").innerHTML = 'Click this label to restart';
309 var sound_id = new Array();
310 for (var i = 1; i < 99999; i++) {
311 clearInterval(i);
312 };
313 for (let i = 0; i < sound.length; i++) {
314 sound[i].stop();
315 };
316 for (let i = 0; i < sound.length; i++) {
317 sound_id.push(sound[i].play());
318 };
319 for (let i = 0; i < sound.length; i++) {
320 sound[i].pause(sound_id[i]);
321 };
322 for (let i = 0; i < sound.length; i++) {
323 sound[i].play(sound_id[i]);
324 };
325 setInterval(audioDebugDispRefresh, 30);
326 for (let i = 0; i < sound.length; i++) {
327 sound[i].seek(0, sound_id[i]);
328 };
329 };
330 function audioDebugDispRefresh () {
331 var sound_nowTime = new Array();
332 for (let i = 0; i < sound.length; i++) {
333 sound_nowTime.push(sound[i].seek());
334 };
335 for (let i = 0; i < sound.length; i++) {
336 document.getElementById(`dbg_snd${i}_sec`).innerHTML = floorDecimal(sound_nowTime[i], 5);
337 };
338 var latency_ary = new Array();
339 for (let i = 0; i < sound.length; i++) {
340 if (i != sound.length - 1) {
341 latency_ary.push(Math.abs(floorDecimal((sound_nowTime[i] - sound_nowTime[i + 1]) * 1000, 2)));
342 };
343 };
344 document.getElementById("dbg_lat").innerHTML = latency_ary.reduce(aryMax);
345 if (latency_ary.reduce(aryMax) < 25) {
346 if (window.matchMedia('(prefers-color-scheme: dark)').matches == true) {
347 document.getElementById("dbg_lat").style.color = '#60ff60';
348 } else {
349 document.getElementById("dbg_lat").style.color = '#00aa00';
350 };
351 } else if (latency_ary.reduce(aryMax) < 40) {
352 if (window.matchMedia('(prefers-color-scheme: dark)').matches == true) {
353 document.getElementById("dbg_lat").style.color = '#ffff60';
354 } else {
355 document.getElementById("dbg_lat").style.color = '#aaaa00';
356 };
357 } else {
358 if (window.matchMedia('(prefers-color-scheme: dark)').matches == true) {
359 document.getElementById("dbg_lat").style.color = '#ff6060';
360 } else {
361 document.getElementById("dbg_lat").style.color = '#aa0000';
362 };
363 };
364 };
365 function toggleMute (id) {
366 if (document.getElementById("chkbx_" + id).checked) {
367 sound[id].mute(false);
368 document.getElementById("snd_txt" + id).style.opacity = 1;
369 } else {
370 sound[id].mute(true);
371 document.getElementById("snd_txt" + id).style.opacity = 0.5;
372 };
373 };
374 function toggleMuteRefreshAll () {
375 for (let i = 0; i < sound.length; i++) {
376 if (document.getElementById("chkbx_" + i).checked) {
377 sound[i].mute(false);
378 } else {
379 sound[i].mute(true);
380 };
381 };
382 };
383 function floorDecimal (value, n) {
384 return Math.floor(value * Math.pow(10, n)) / Math.pow(10, n);
385 };
386 function ceilDecimal (value, n) {
387 return Math.ceil(value * Math.pow(10, n)) / Math.pow(10, n);
388 };
389 function roundDecimal (value, n) {
390 return Math.round(value * Math.pow(10, n)) / Math.pow(10, n);
391 };
392 function sleep(waitMsec) {
393 var startMsec = new Date();
394 while (new Date() - startMsec < waitMsec);
395 };
396 const aryMax = function (a, b) {return Math.max(a, b);};
397 const aryMin = function (a, b) {return Math.min(a, b);};
398 </script>
399 </head>
400 <body>
401 <div class="main" draggable="true">
402 <div class="blk">
403 <h3>Multiple sound sync test</h3>
404 <p><a id="start_btn" onclick="start()">Click this label to start</a></p>
405 <p><a id="muterefresh_btn" onclick="toggleMuteRefreshAll()">Click this label to refresh mute state</a></p>
406 <!-- <p><a onclick="skip()">CLICK THIS LABEL TO SKIP 10s</a></p> -->
407 <p id="snd_txt0"><input type="checkbox" name="trk" onchange="toggleMute(this.value)" id="chkbx_0" value="0" checked>Audio 0: <span id="dbg_snd0_sec">---</span> s</p>
408 <p id="snd_txt1"><input type="checkbox" name="trk" onchange="toggleMute(this.value)" id="chkbx_1" value="1" checked>Audio 1: <span id="dbg_snd1_sec">---</span> s</p>
409 <p id="snd_txt2"><input type="checkbox" name="trk" onchange="toggleMute(this.value)" id="chkbx_2" value="2" checked>Audio 2: <span id="dbg_snd2_sec">---</span> s</p>
410 <p id="snd_txt3"><input type="checkbox" name="trk" onchange="toggleMute(this.value)" id="chkbx_3" value="3" checked>Audio 3: <span id="dbg_snd3_sec">---</span> s</p>
411 <p id="snd_txt4"><input type="checkbox" name="trk" onchange="toggleMute(this.value)" id="chkbx_4" value="4" checked>Audio 4: <span id="dbg_snd4_sec">---</span> s</p>
412 <p id="snd_txt5"><input type="checkbox" name="trk" onchange="toggleMute(this.value)" id="chkbx_5" value="5" checked>Audio 5: <span id="dbg_snd5_sec">---</span> s</p>
413 <p id="snd_txt6"><input type="checkbox" name="trk" onchange="toggleMute(this.value)" id="chkbx_6" value="6" checked>Audio 6: <span id="dbg_snd6_sec">---</span> s</p>
414 <p>Max Sync Latency: <span id="dbg_lat">---</span> ms</p>
415 </div>
416 <div id="siri-container"></div>
417 </div>
418 </body>
419</html>
420