Spaces:
Running
Running
daydreamer-json
commited on
Commit
·
a50fd29
unverified
·
0
Parent(s):
Create aud_sync_test1.html
Browse files- 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>
|