daydreamer-json commited on
Commit
a50fd29
·
unverified ·
0 Parent(s):

Create aud_sync_test1.html

Browse files
Files changed (1) hide show
  1. aud_sync_test1.html +401 -0
aud_sync_test1.html ADDED
@@ -0,0 +1,401 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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,[email protected],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://storage.sekai.best/sekai-assets/streaming_live/music/sc_2nd_live_anv_rip/sc_2nd_live_anv.mp3",
273
+ "https://storage.sekai.best/sekai-assets/streaming_live/music/sc_2nd_live_anv_rip/sc_2nd_live_anv_aud.mp3"
274
+ ];
275
+ var sound = new Array();
276
+ for (let i = 0; i < AUDIO_SOURCE.length; i++) {
277
+ let stereo_sep = ((AUDIO_SOURCE.length / (i + 1)) * 2 - 1);
278
+ sound.push(new Howl({
279
+ src: [AUDIO_SOURCE[i]],
280
+ stereo: stereo_sep,
281
+ loop: false
282
+ }));
283
+ };
284
+ function start () {
285
+ var clone = document.getElementById("siri-container").cloneNode(false);
286
+ document.getElementById("siri-container").parentNode.replaceChild(clone, document.getElementById("siri-container"));
287
+ /* var siriWave = new SiriWave({
288
+ container: document.getElementById("siri-container"),
289
+ autostart: true,
290
+ height: 128,
291
+ style: "ios9",
292
+ speed: 0.15,
293
+ amplitude: 1.5
294
+ }); */
295
+ document.getElementById("start_btn").innerHTML = 'Click this label to restart';
296
+ var sound_id = new Array();
297
+ for (var i = 1; i < 99999; i++) {
298
+ clearInterval(i);
299
+ };
300
+ for (let i = 0; i < sound.length; i++) {
301
+ sound[i].stop();
302
+ };
303
+ for (let i = 0; i < sound.length; i++) {
304
+ sound_id.push(sound[i].play());
305
+ };
306
+ for (let i = 0; i < sound.length; i++) {
307
+ sound[i].pause(sound_id[i]);
308
+ };
309
+ for (let i = 0; i < sound.length; i++) {
310
+ sound[i].play(sound_id[i]);
311
+ };
312
+ setInterval(audioDebugDispRefresh, 30);
313
+ for (let i = 0; i < sound.length; i++) {
314
+ sound[i].seek(0, sound_id[i]);
315
+ };
316
+ };
317
+ function audioDebugDispRefresh () {
318
+ var sound_nowTime = new Array();
319
+ for (let i = 0; i < sound.length; i++) {
320
+ sound_nowTime.push(sound[i].seek());
321
+ };
322
+ for (let i = 0; i < sound.length; i++) {
323
+ document.getElementById(`dbg_snd${i}_sec`).innerHTML = floorDecimal(sound_nowTime[i], 5);
324
+ };
325
+ var latency_ary = new Array();
326
+ for (let i = 0; i < sound.length; i++) {
327
+ if (i != sound.length - 1) {
328
+ latency_ary.push(Math.abs(floorDecimal((sound_nowTime[i] - sound_nowTime[i + 1]) * 1000, 2)));
329
+ };
330
+ };
331
+ document.getElementById("dbg_lat").innerHTML = latency_ary.reduce(aryMax);
332
+ if (latency_ary.reduce(aryMax) < 10) {
333
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches == true) {
334
+ document.getElementById("dbg_lat").style.color = '#60ff60';
335
+ } else {
336
+ document.getElementById("dbg_lat").style.color = '#00aa00';
337
+ };
338
+ } else if (latency_ary.reduce(aryMax) < 25) {
339
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches == true) {
340
+ document.getElementById("dbg_lat").style.color = '#ffff60';
341
+ } else {
342
+ document.getElementById("dbg_lat").style.color = '#aaaa00';
343
+ };
344
+ } else {
345
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches == true) {
346
+ document.getElementById("dbg_lat").style.color = '#ff6060';
347
+ } else {
348
+ document.getElementById("dbg_lat").style.color = '#aa0000';
349
+ };
350
+ };
351
+ };
352
+ function toggleMute (id) {
353
+ if (document.getElementById("chkbx_" + id).checked) {
354
+ sound[id].mute(false);
355
+ document.getElementById("snd_txt" + id).style.opacity = 1;
356
+ } else {
357
+ sound[id].mute(true);
358
+ document.getElementById("snd_txt" + id).style.opacity = 0.5;
359
+ };
360
+ };
361
+ function toggleMuteRefreshAll () {
362
+ for (let i = 0; i < sound.length; i++) {
363
+ if (document.getElementById("chkbx_" + i).checked) {
364
+ sound[i].mute(false);
365
+ } else {
366
+ sound[i].mute(true);
367
+ };
368
+ };
369
+ };
370
+ function floorDecimal (value, n) {
371
+ return Math.floor(value * Math.pow(10, n)) / Math.pow(10, n);
372
+ };
373
+ function ceilDecimal (value, n) {
374
+ return Math.ceil(value * Math.pow(10, n)) / Math.pow(10, n);
375
+ };
376
+ function roundDecimal (value, n) {
377
+ return Math.round(value * Math.pow(10, n)) / Math.pow(10, n);
378
+ };
379
+ function sleep(waitMsec) {
380
+ var startMsec = new Date();
381
+ while (new Date() - startMsec < waitMsec);
382
+ };
383
+ const aryMax = function (a, b) {return Math.max(a, b);};
384
+ const aryMin = function (a, b) {return Math.min(a, b);};
385
+ </script>
386
+ </head>
387
+ <body>
388
+ <div class="main" draggable="true">
389
+ <div class="blk">
390
+ <h3>Multiple sound sync test</h3>
391
+ <p><a id="start_btn" onclick="start()">Click this label to start</a></p>
392
+ <p><a id="muterefresh_btn" onclick="toggleMuteRefreshAll()">Click this label to refresh mute state</a></p>
393
+ <!-- <p><a onclick="skip()">CLICK THIS LABEL TO SKIP 10s</a></p> -->
394
+ <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>
395
+ <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>
396
+ <p>Max Sync Latency: <span id="dbg_lat">---</span> ms</p>
397
+ </div>
398
+ <div id="siri-container"></div>
399
+ </div>
400
+ </body>
401
+ </html>