Hugging Face's logo

Spaces:
daydreamer-json
/
hp
Running

App Files Community
daydreamer-json commited on
Commit
5b75b9f
·
verified ·
1 Parent(s): 3355ab0

Add file

Browse files
Files changed (11) hide show
  1. aud_sync_test1.html +401 -401
  2. aud_sync_test2.html +419 -419
  3. ba_video_test.html +20 -20
  4. gi_cutscn_viewer.html +193 -193
  5. gi_jukebox.html +236 -236
  6. gi_jukebox_copy.html +267 -267
  7. hi_jukebox.html +226 -226
  8. plyr_test_0001.html +216 -0
  9. stay_audio_format.html +405 -405
  10. test.js +0 -0
  11. umm_audiosync_test.html +289 -289
aud_sync_test1.html CHANGED
@@ -1,401 +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>
 
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>
aud_sync_test2.html CHANGED
@@ -1,419 +1,419 @@
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://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>
 
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://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>
ba_video_test.html CHANGED
@@ -1,21 +1,21 @@
1
- <html>
2
- <head>
3
- <meta charset="utf-8" />
4
- <meta name="viewport" content="width=device-width, initial-scale=1.00" />
5
- <meta name="robots" content="noindex,nofollow,noarchive" />
6
- <style>
7
- html,body,video {
8
- color: #fff;
9
- background: #000;
10
- margin: 0;
11
- line-height: 1;
12
- width: 100vw;
13
- height: 100vh;
14
- font-family: system-ui;
15
- }
16
- </style>
17
- </head>
18
- <body>
19
- <video controls src="https://cdn.discordapp.com/attachments/873258418452987997/1088766340904525844/PV_2_2160p_24Mbps.mp4"></video>
20
- </body>
21
  </html>
 
1
+ <html>
2
+ <head>
3
+ <meta charset="utf-8" />
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.00" />
5
+ <meta name="robots" content="noindex,nofollow,noarchive" />
6
+ <style>
7
+ html,body,video {
8
+ color: #fff;
9
+ background: #000;
10
+ margin: 0;
11
+ line-height: 1;
12
+ width: 100vw;
13
+ height: 100vh;
14
+ font-family: system-ui;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <video controls src="https://cdn.discordapp.com/attachments/873258418452987997/1088766340904525844/PV_2_2160p_24Mbps.mp4"></video>
20
+ </body>
21
  </html>
gi_cutscn_viewer.html CHANGED
@@ -1,193 +1,193 @@
1
- <!DOCTYPE html>
2
- <html lang='en'>
3
- <head>
4
- <title>tst</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://cdn.plyr.io/3.7.3/plyr.js"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
11
- <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
12
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
13
- <link href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css" rel="stylesheet" type="text/css" media="all">
14
- <style>
15
- html, body {
16
- color: #fff;
17
- background: #000;
18
- margin: 0;
19
- line-height: 1;
20
- width: 100vw;
21
- height: 100vh;
22
- font-family: 'A-OTF UD Shin Go Pro', system-ui;
23
- }
24
- .main2 {
25
- display: flex;
26
- flex-direction: column;
27
- height: 100vh;
28
- }
29
- #video, .plyr {
30
- flex-grow: 1;
31
- height: 100%;
32
- width: 100%;
33
- }
34
- </style>
35
- </head>
36
- <body>
37
- <div class="main">
38
- <div class="main2">
39
- <p><span>File:</span><span>
40
- <select id="filePullDownMenu" name="videoName" required>
41
- </select>
42
- </span><span id="audioTrackPullDownRow" hidden><br>
43
- <span>Audio:</span><span>
44
- <select id="audioTrackPullDownMenu" name="audioTrackName" required>
45
- </select>
46
- </span></span></p>
47
- <video id="video" controls crossorigin>
48
- <source type="application/x-mpegURL">
49
- </video>
50
- </div>
51
- </div>
52
- <script>
53
- var default_file = 'Cs_LQ1101502_ShenheBattle_Boy';
54
- var default_hls_pl_type = 'normal';
55
- var videoData_BaseURL = 'https://raw.githubusercontent.com/daydreamer-json/gi_cutscn/main/media/hls/master';
56
- const defaultOptions = {};
57
- document.addEventListener('DOMContentLoaded', () => {
58
- loadDatabase();
59
- var playerElement = document.getElementById('video');
60
- var videoSrc = `${videoData_BaseURL}/${default_hls_pl_type}/${default_file}.m3u8`;
61
- var hls = new Hls();
62
- document.getElementById('filePullDownMenu').addEventListener('change', changeSrc);
63
- document.getElementById('audioTrackPullDownMenu').addEventListener('change', changeAudioTrack);
64
- hlsInitialize(videoSrc, playerElement);
65
- })
66
- function loadDatabase () {
67
- let file_database_url = 'https://raw.githubusercontent.com/daydreamer-json/gi_cutscn/main/cutscn_list.json';
68
- let file_database_req = new XMLHttpRequest();
69
- file_database_req.open('GET', file_database_url);
70
- file_database_req.responseType = 'json';
71
- file_database_req.send();
72
- file_database_req.onload = function () {
73
- const file_database = file_database_req.response;
74
- for (let i = 0; i < file_database.length; i++) {
75
- var temp_option = document.createElement('option');
76
- var temp_textNode = document.createTextNode(file_database[i]);
77
- temp_option.appendChild(temp_textNode);
78
- temp_option.setAttribute('value',file_database[i]);
79
- if (file_database[i] == default_file) {
80
- temp_option.setAttribute('selected',true);
81
- };
82
- document.getElementById('filePullDownMenu').appendChild(temp_option);
83
- };
84
- };
85
- }
86
- function hlsInitialize (sourceURL, element) {
87
- if (hls) {
88
- hls.detachMedia();
89
- };
90
- if (Hls.isSupported()) {
91
- var hls = new Hls();
92
- hls.loadSource(sourceURL);
93
- hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
94
- const availableQualities = hls.levels.map((l) => l.height);
95
- availableQualities.unshift(0);
96
- defaultOptions.quality = {
97
- default: 0,
98
- options: availableQualities,
99
- forced: true,
100
- onChange: (e) => updateQuality(e)
101
- };
102
- defaultOptions.i18n = {
103
- qualityLabel: {
104
- 0: 'Auto'
105
- }
106
- };
107
- hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
108
- if (hls.autoLevelEnabled) {
109
- document.querySelector(".plyr__menu__container [data-plyr='quality'][value='0'] span").innerHTML = `Auto (${hls.levels[data.level].height}p)`;
110
- } else {
111
- document.querySelector(".plyr__menu__container [data-plyr='quality'][value='0'] span").innerHTML = `Auto`;
112
- }
113
- });
114
- const player = new Plyr(element, defaultOptions);
115
- loadAvailableAudioTracks();
116
- player.on('ready',function () {
117
- if (hls.audioTrack) {
118
- let audioTrackPullDownMenu = document.getElementById('audioTrackPullDownMenu');
119
- audioTrackPullDownMenu.getElementsByTagName('option')[hls.audioTrack].setAttribute('selected',true);
120
- };
121
- });
122
-
123
- });
124
- hls.attachMedia(element);
125
- window.hls = hls;
126
- } else if (element.canPlayType('application/vnd.apple.mpegurl')) {
127
- element.getElementsByTagName('source')[0].src = sourceURL;
128
- };
129
- }
130
- function updateQuality (newQuality) {
131
- if (newQuality === 0) {
132
- window.hls.currentLevel = -1;
133
- } else {
134
- window.hls.levels.forEach((level, levelIndex) => {
135
- if (level.height === newQuality) {
136
- console.log("Found quality match with " + newQuality);
137
- window.hls.currentLevel = levelIndex;
138
- }
139
- });
140
- }
141
- }
142
- function changeSrc () {
143
- let selectedFileName = document.getElementById('filePullDownMenu').value;
144
- hlsInitialize(`${videoData_BaseURL}/${default_hls_pl_type}/${selectedFileName}.m3u8`, document.getElementById('video'));
145
- var element = document.getElementById('video');
146
- if (element.canPlayType('application/vnd.apple.mpegurl')) {
147
- element.remove();
148
- var temp_video = document.createElement('video');
149
- temp_video.setAttribute('id', 'video');
150
- temp_video.setAttribute('controls', true);
151
- temp_video.setAttribute('crossorigin', true);
152
- var temp_source = document.createElement('source');
153
- temp_source.setAttribute('type', 'application/x-mpegURL');
154
- temp_source.setAttribute('src', `${videoData_BaseURL}/${default_hls_pl_type}/${selectedFileName}.m3u8`);
155
- temp_video.appendChild(temp_source);
156
- var temp_main2 = document.getElementsByClassName('main2')[0];
157
- temp_main2.appendChild(temp_video);
158
- }
159
- }
160
- function loadAvailableAudioTracks () {
161
- while (document.getElementById('audioTrackPullDownMenu').firstChild) {
162
- document.getElementById('audioTrackPullDownMenu').removeChild(document.getElementById('audioTrackPullDownMenu').firstChild);
163
- }
164
- document.getElementById('audioTrackPullDownRow').removeAttribute('hidden');
165
- let availableAudioTracks = {};
166
- /*
167
- availableAudioTracks.lang = hls.audioTracks.map((l) => l.lang);
168
- availableAudioTracks.name = hls.audioTracks.map((l) => l.name);
169
- */
170
- availableAudioTracks.lang = ['zh', 'en', 'ja', 'ko'];
171
- availableAudioTracks.name = ['Chinese', 'English', 'Japanese', 'Korean'];
172
- for (let i = 0; i < availableAudioTracks.lang.length; i++) {
173
- var temp_option = document.createElement('option');
174
- var temp_textNode = document.createTextNode(`${availableAudioTracks.lang[i]} (${availableAudioTracks.name[i]})`);
175
- temp_option.appendChild(temp_textNode);
176
- temp_option.setAttribute('value',i);
177
- /*
178
- if (hls.audioTrack == i) {
179
- temp_option.setAttribute('selected',true);
180
- }
181
- */
182
- document.getElementById('audioTrackPullDownMenu').appendChild(temp_option);
183
- };
184
- }
185
- function changeAudioTrack () {
186
- let selectedAudioTrack = document.getElementById('audioTrackPullDownMenu').value;
187
- if (hls) {
188
- hls.audioTrack = selectedAudioTrack;
189
- }
190
- }
191
- </script>
192
- </body>
193
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang='en'>
3
+ <head>
4
+ <title>tst</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://cdn.plyr.io/3.7.3/plyr.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
11
+ <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
12
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
13
+ <link href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css" rel="stylesheet" type="text/css" media="all">
14
+ <style>
15
+ html, body {
16
+ color: #fff;
17
+ background: #000;
18
+ margin: 0;
19
+ line-height: 1;
20
+ width: 100vw;
21
+ height: 100vh;
22
+ font-family: 'A-OTF UD Shin Go Pro', system-ui;
23
+ }
24
+ .main2 {
25
+ display: flex;
26
+ flex-direction: column;
27
+ height: 100vh;
28
+ }
29
+ #video, .plyr {
30
+ flex-grow: 1;
31
+ height: 100%;
32
+ width: 100%;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body>
37
+ <div class="main">
38
+ <div class="main2">
39
+ <p><span>File:</span><span>
40
+ <select id="filePullDownMenu" name="videoName" required>
41
+ </select>
42
+ </span><span id="audioTrackPullDownRow" hidden><br>
43
+ <span>Audio:</span><span>
44
+ <select id="audioTrackPullDownMenu" name="audioTrackName" required>
45
+ </select>
46
+ </span></span></p>
47
+ <video id="video" controls crossorigin>
48
+ <source type="application/x-mpegURL">
49
+ </video>
50
+ </div>
51
+ </div>
52
+ <script>
53
+ var default_file = 'Cs_LQ1101502_ShenheBattle_Boy';
54
+ var default_hls_pl_type = 'normal';
55
+ var videoData_BaseURL = 'https://raw.githubusercontent.com/daydreamer-json/gi_cutscn/main/media/hls/master';
56
+ const defaultOptions = {};
57
+ document.addEventListener('DOMContentLoaded', () => {
58
+ loadDatabase();
59
+ var playerElement = document.getElementById('video');
60
+ var videoSrc = `${videoData_BaseURL}/${default_hls_pl_type}/${default_file}.m3u8`;
61
+ var hls = new Hls();
62
+ document.getElementById('filePullDownMenu').addEventListener('change', changeSrc);
63
+ document.getElementById('audioTrackPullDownMenu').addEventListener('change', changeAudioTrack);
64
+ hlsInitialize(videoSrc, playerElement);
65
+ })
66
+ function loadDatabase () {
67
+ let file_database_url = 'https://raw.githubusercontent.com/daydreamer-json/gi_cutscn/main/cutscn_list.json';
68
+ let file_database_req = new XMLHttpRequest();
69
+ file_database_req.open('GET', file_database_url);
70
+ file_database_req.responseType = 'json';
71
+ file_database_req.send();
72
+ file_database_req.onload = function () {
73
+ const file_database = file_database_req.response;
74
+ for (let i = 0; i < file_database.length; i++) {
75
+ var temp_option = document.createElement('option');
76
+ var temp_textNode = document.createTextNode(file_database[i]);
77
+ temp_option.appendChild(temp_textNode);
78
+ temp_option.setAttribute('value',file_database[i]);
79
+ if (file_database[i] == default_file) {
80
+ temp_option.setAttribute('selected',true);
81
+ };
82
+ document.getElementById('filePullDownMenu').appendChild(temp_option);
83
+ };
84
+ };
85
+ }
86
+ function hlsInitialize (sourceURL, element) {
87
+ if (hls) {
88
+ hls.detachMedia();
89
+ };
90
+ if (Hls.isSupported()) {
91
+ var hls = new Hls();
92
+ hls.loadSource(sourceURL);
93
+ hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
94
+ const availableQualities = hls.levels.map((l) => l.height);
95
+ availableQualities.unshift(0);
96
+ defaultOptions.quality = {
97
+ default: 0,
98
+ options: availableQualities,
99
+ forced: true,
100
+ onChange: (e) => updateQuality(e)
101
+ };
102
+ defaultOptions.i18n = {
103
+ qualityLabel: {
104
+ 0: 'Auto'
105
+ }
106
+ };
107
+ hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
108
+ if (hls.autoLevelEnabled) {
109
+ document.querySelector(".plyr__menu__container [data-plyr='quality'][value='0'] span").innerHTML = `Auto (${hls.levels[data.level].height}p)`;
110
+ } else {
111
+ document.querySelector(".plyr__menu__container [data-plyr='quality'][value='0'] span").innerHTML = `Auto`;
112
+ }
113
+ });
114
+ const player = new Plyr(element, defaultOptions);
115
+ loadAvailableAudioTracks();
116
+ player.on('ready',function () {
117
+ if (hls.audioTrack) {
118
+ let audioTrackPullDownMenu = document.getElementById('audioTrackPullDownMenu');
119
+ audioTrackPullDownMenu.getElementsByTagName('option')[hls.audioTrack].setAttribute('selected',true);
120
+ };
121
+ });
122
+
123
+ });
124
+ hls.attachMedia(element);
125
+ window.hls = hls;
126
+ } else if (element.canPlayType('application/vnd.apple.mpegurl')) {
127
+ element.getElementsByTagName('source')[0].src = sourceURL;
128
+ };
129
+ }
130
+ function updateQuality (newQuality) {
131
+ if (newQuality === 0) {
132
+ window.hls.currentLevel = -1;
133
+ } else {
134
+ window.hls.levels.forEach((level, levelIndex) => {
135
+ if (level.height === newQuality) {
136
+ console.log("Found quality match with " + newQuality);
137
+ window.hls.currentLevel = levelIndex;
138
+ }
139
+ });
140
+ }
141
+ }
142
+ function changeSrc () {
143
+ let selectedFileName = document.getElementById('filePullDownMenu').value;
144
+ hlsInitialize(`${videoData_BaseURL}/${default_hls_pl_type}/${selectedFileName}.m3u8`, document.getElementById('video'));
145
+ var element = document.getElementById('video');
146
+ if (element.canPlayType('application/vnd.apple.mpegurl')) {
147
+ element.remove();
148
+ var temp_video = document.createElement('video');
149
+ temp_video.setAttribute('id', 'video');
150
+ temp_video.setAttribute('controls', true);
151
+ temp_video.setAttribute('crossorigin', true);
152
+ var temp_source = document.createElement('source');
153
+ temp_source.setAttribute('type', 'application/x-mpegURL');
154
+ temp_source.setAttribute('src', `${videoData_BaseURL}/${default_hls_pl_type}/${selectedFileName}.m3u8`);
155
+ temp_video.appendChild(temp_source);
156
+ var temp_main2 = document.getElementsByClassName('main2')[0];
157
+ temp_main2.appendChild(temp_video);
158
+ }
159
+ }
160
+ function loadAvailableAudioTracks () {
161
+ while (document.getElementById('audioTrackPullDownMenu').firstChild) {
162
+ document.getElementById('audioTrackPullDownMenu').removeChild(document.getElementById('audioTrackPullDownMenu').firstChild);
163
+ }
164
+ document.getElementById('audioTrackPullDownRow').removeAttribute('hidden');
165
+ let availableAudioTracks = {};
166
+ /*
167
+ availableAudioTracks.lang = hls.audioTracks.map((l) => l.lang);
168
+ availableAudioTracks.name = hls.audioTracks.map((l) => l.name);
169
+ */
170
+ availableAudioTracks.lang = ['zh', 'en', 'ja', 'ko'];
171
+ availableAudioTracks.name = ['Chinese', 'English', 'Japanese', 'Korean'];
172
+ for (let i = 0; i < availableAudioTracks.lang.length; i++) {
173
+ var temp_option = document.createElement('option');
174
+ var temp_textNode = document.createTextNode(`${availableAudioTracks.lang[i]} (${availableAudioTracks.name[i]})`);
175
+ temp_option.appendChild(temp_textNode);
176
+ temp_option.setAttribute('value',i);
177
+ /*
178
+ if (hls.audioTrack == i) {
179
+ temp_option.setAttribute('selected',true);
180
+ }
181
+ */
182
+ document.getElementById('audioTrackPullDownMenu').appendChild(temp_option);
183
+ };
184
+ }
185
+ function changeAudioTrack () {
186
+ let selectedAudioTrack = document.getElementById('audioTrackPullDownMenu').value;
187
+ if (hls) {
188
+ hls.audioTrack = selectedAudioTrack;
189
+ }
190
+ }
191
+ </script>
192
+ </body>
193
+ </html>
gi_jukebox.html CHANGED
@@ -1,237 +1,237 @@
1
- <!DOCTYPE html>
2
- <html lang='en'>
3
- <head>
4
- <title>N/A</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://cdn.plyr.io/3.7.3/plyr.js"></script>
11
- <script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
12
- <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
13
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
14
- <link href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css" rel="stylesheet" type="text/css" media="all">
15
- <style>
16
- html, body {
17
- color: #fff;
18
- background: #000;
19
- margin: 0;
20
- padding: 0;
21
- line-height: 1;
22
- width: 100vw;
23
- height: 100vh;
24
- font-family: 'SDK_JP_Web', system-ui;
25
- }
26
- #h2string1 {
27
- margin: 0;
28
- padding: 0;
29
- line-height: 1;
30
- }
31
- #main {
32
- position: absolute;
33
- top: 50%;
34
- left: 50%;
35
- transform: translate(-50%, -50%);
36
- text-align: center;
37
- margin: 0;
38
- padding: 0;
39
- white-space: normal;
40
- letter-spacing: -0.02em;
41
- text-shadow: 0 0 30px #cccccc;
42
- z-index: 100;
43
- }
44
- #cover_bg_container {
45
- width: 100vw;
46
- height: 100vh;
47
- overflow: hidden;
48
- }
49
- #cover_bg {
50
- z-index: 95;
51
- width: 100vw;
52
- height: 100vh;
53
- opacity: 0.3;
54
- object-fit: cover;
55
- object-position: 50% 50%;
56
- }
57
- .do-not-select {
58
- user-select: none;
59
- }
60
- .do-not-bold {
61
- font-weight: normal;
62
- }
63
- </style>
64
- </head>
65
- <body>
66
- <div id='cover_bg_container' class='do-not-select'>
67
- <img id='cover_bg' src='' style='display: none;' class='do-not-select'>
68
- </div>
69
- <div id='main'>
70
- <h2 id='h2string1' class='do-not-select do-not-bold'>&nbsp;</h1>
71
- <h1 id='h1string1' class='do-not-select do-not-bold'>&nbsp;</h1>
72
- <div id='trackInfo' class='do-not-select'>
73
- <h3 id='trackInfo_trackName' class='do-not-bold' style='display: none;'>&nbsp;</h3>
74
- <h4 id='trackInfo_albumName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
75
- <h4 id='trackInfo_artistName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
76
- <p id='trackInfo_copyright' style='display: none;'>&nbsp;</p>
77
- </div>
78
- </div>
79
- <script>
80
- let BASE_SETTINGS = {
81
- base64var: {
82
- pageTitle: 'R2Vuc2hpbiBJbXBhY3QgTXVzaWMgSnVrZWJveA==',
83
- h2string1: 'R2Vuc2hpbiBJbXBhY3QgTXVzaWMgSnVrZWJveA=='
84
- },
85
- audioRootURL: 'https://raw.githubusercontent.com/daydreamer-json/discography_cdn_005/main/mhy/genshin',
86
- playStartButtonText_init_pc: 'CLICK TO PLAY',
87
- playStartButtonText_init_mobile: 'TAP TO PLAY',
88
- playStartButtonText_loading: 'LOADING ...',
89
- playStartButtonText_playing: 'NOW PLAYING',
90
- trackInfoLabel_loading: 'Loading ...',
91
- forceCompressedFormat: true
92
- };
93
- function detectMobileDevice() {
94
- if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
95
- return 'mobile'
96
- } else {
97
- return 'pc'
98
- }
99
- }
100
- function display_deobfuscate() {
101
- document.title = atob(BASE_SETTINGS.base64var.pageTitle);
102
- document.getElementById('h2string1').textContent = atob(BASE_SETTINGS.base64var.h2string1);
103
- }
104
- function randomTrackSelector(db) {
105
- let random32bitArray = new Uint32Array(3);
106
- window.crypto.getRandomValues(random32bitArray);
107
- let randomizedAlbumIndex = random32bitArray[0] % db.list.length;
108
- let randomizedDiscIndex = random32bitArray[1] % db.list[randomizedAlbumIndex].discs.length;
109
- let randomizedTrackIndex = random32bitArray[2] % db.list[randomizedAlbumIndex].discs[randomizedDiscIndex].tracks.length;
110
- return {
111
- albumIndex: randomizedAlbumIndex,
112
- discIndex: randomizedDiscIndex,
113
- trackIndex: randomizedTrackIndex
114
- };
115
- }
116
- function playAudioURLBuilder(db, randomTrackSelectorOutput) {
117
- let deviceType = detectMobileDevice();
118
- /*
119
- let bpsArray = new Array();
120
- for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length; i++) {
121
- bpsArray.push(db.list[randomTrackSelectorOutput.albumIndex].availableFmts[i].bps);
122
- };
123
- bpsArray.sort((a, b) => b - a);
124
- */
125
- let formatPath = '';
126
- let formatExt = '';
127
- if (BASE_SETTINGS.forceCompressedFormat) {
128
- formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
129
- formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
130
- } else if (deviceType == 'pc') {
131
- formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].path;
132
- formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].ext;
133
- } else if (deviceType == 'mobile') {
134
- formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
135
- formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
136
- }
137
- let trackTotal = 0;
138
- let trackCountArray = new Array();
139
- for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].discs.length; i++) {
140
- trackTotal += db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length;
141
- trackCountArray.push(db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length);
142
- };
143
- let selectedTrackNum = 0;
144
- if (randomTrackSelectorOutput.discIndex == 0) {
145
- selectedTrackNum = randomTrackSelectorOutput.trackIndex + 1;
146
- } else {
147
- let E7BF25ECDBAAF938 = 0;
148
- for (let i = 0; i < randomTrackSelectorOutput.discIndex; i++) {
149
- E7BF25ECDBAAF938 += trackCountArray[i];
150
- }
151
- selectedTrackNum = E7BF25ECDBAAF938 + randomTrackSelectorOutput.trackIndex + 1;
152
- }
153
- let selectedTrackNumStr = '';
154
- if (trackTotal >= 100) {
155
- selectedTrackNumStr = selectedTrackNum.toString().padStart(3, '0');
156
- } else if (trackTotal < 100) {
157
- selectedTrackNumStr = selectedTrackNum.toString().padStart(2, '0');
158
- }
159
- let filename = encodeURIComponent(db.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'].replace(/'/g, '_'));
160
- let buildedURL = `${BASE_SETTINGS.audioRootURL}/${db.list[randomTrackSelectorOutput.albumIndex].rootPath}/${formatPath}/${selectedTrackNumStr}_${filename}.${formatExt}`;
161
- return buildedURL;
162
- }
163
- function playAudio() {
164
- document.getElementById('h1string1').removeEventListener('click', playAudio);
165
- if (typeof audioPlayer !== 'undefined') {
166
- audioPlayer.unload();
167
- };
168
- fetch(`${BASE_SETTINGS.audioRootURL}/db.json`)
169
- .then(response => response.json())
170
- .then(data => {
171
- console.log('Database loaded successfully');
172
- const FILE_DATABASE = data;
173
- let deviceType = detectMobileDevice();
174
- let randomTrackSelectorOutput = randomTrackSelector(FILE_DATABASE);
175
- var audioPlayer = new Howl ({
176
- src: [playAudioURLBuilder(FILE_DATABASE, randomTrackSelectorOutput)],
177
- html5: true
178
- });
179
- window.audioPlayer = audioPlayer;
180
- document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_loading;
181
- document.getElementById('trackInfo_trackName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
182
- document.getElementById('trackInfo_albumName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
183
- document.getElementById('trackInfo_artistName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
184
- document.getElementById('trackInfo_copyright').textContent = BASE_SETTINGS.trackInfoLabel_loading;
185
- audioPlayer.on('loaderror', function(){
186
- console.error('Audio "loaderror" has occured. Retrying ...');
187
- playAudio();
188
- });
189
- audioPlayer.on('playerror', function(){
190
- console.error('Audio "playerror" has occured. Retrying ...');
191
- playAudio();
192
- });
193
- audioPlayer.on('load', function(){
194
- audioPlayer.play();
195
- document.getElementById('h1string1').addEventListener('click', playAudio);
196
- document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_playing;
197
- console.log(`Now playing "${FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US']}"`);
198
- console.log(`URL: ${audioPlayer._src}`);
199
- document.getElementById('trackInfo_trackName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'];
200
- document.getElementById('trackInfo_albumName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumTitle;
201
- document.getElementById('trackInfo_artistName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumArtist;
202
- document.getElementById('trackInfo_copyright').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].copyright;
203
- document.getElementById('cover_bg').src = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].coverExtLink;
204
- if (document.getElementById('trackInfo_trackName').style.display == 'none' && document.getElementById('trackInfo_albumName').style.display == 'none' && document.getElementById('trackInfo_artistName').style.display == 'none' && document.getElementById('trackInfo_copyright').style.display == 'none' && document.getElementById('cover_bg').style.display == 'none') {
205
- document.getElementById('trackInfo_trackName').style.display = 'block';
206
- document.getElementById('trackInfo_albumName').style.display = 'block';
207
- document.getElementById('trackInfo_artistName').style.display = 'block';
208
- document.getElementById('trackInfo_copyright').style.display = 'block';
209
- document.getElementById('cover_bg').style.display = 'block';
210
- }
211
- audioPlayer.on('end', playAudio);
212
- });
213
- })
214
- .catch(error => {
215
- console.error(error);
216
- alert('Failed to load database file');
217
- });
218
- }
219
- document.addEventListener('DOMContentLoaded', function() {
220
- display_deobfuscate();
221
- let deviceType = detectMobileDevice();
222
- if (deviceType == 'pc') {
223
- document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_pc;
224
- } else if (deviceType == 'mobile') {
225
- document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_mobile;
226
- };
227
- var audioPlayer = new Howl ({
228
- src: ['https://archive.org/download/audio-silent-wavs-one-second-half-second-quarter-second/silent_quarter-second.mp3']
229
- });
230
- window.audioPlayer = audioPlayer;
231
- });
232
- window.onload = function () {
233
- document.getElementById('h1string1').addEventListener('click', playAudio);
234
- }
235
- </script>
236
- </body>
237
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang='en'>
3
+ <head>
4
+ <title>N/A</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://cdn.plyr.io/3.7.3/plyr.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
13
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
14
+ <link href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css" rel="stylesheet" type="text/css" media="all">
15
+ <style>
16
+ html, body {
17
+ color: #fff;
18
+ background: #000;
19
+ margin: 0;
20
+ padding: 0;
21
+ line-height: 1;
22
+ width: 100vw;
23
+ height: 100vh;
24
+ font-family: 'SDK_JP_Web', system-ui;
25
+ }
26
+ #h2string1 {
27
+ margin: 0;
28
+ padding: 0;
29
+ line-height: 1;
30
+ }
31
+ #main {
32
+ position: absolute;
33
+ top: 50%;
34
+ left: 50%;
35
+ transform: translate(-50%, -50%);
36
+ text-align: center;
37
+ margin: 0;
38
+ padding: 0;
39
+ white-space: normal;
40
+ letter-spacing: -0.02em;
41
+ text-shadow: 0 0 30px #cccccc;
42
+ z-index: 100;
43
+ }
44
+ #cover_bg_container {
45
+ width: 100vw;
46
+ height: 100vh;
47
+ overflow: hidden;
48
+ }
49
+ #cover_bg {
50
+ z-index: 95;
51
+ width: 100vw;
52
+ height: 100vh;
53
+ opacity: 0.3;
54
+ object-fit: cover;
55
+ object-position: 50% 50%;
56
+ }
57
+ .do-not-select {
58
+ user-select: none;
59
+ }
60
+ .do-not-bold {
61
+ font-weight: normal;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body>
66
+ <div id='cover_bg_container' class='do-not-select'>
67
+ <img id='cover_bg' src='' style='display: none;' class='do-not-select'>
68
+ </div>
69
+ <div id='main'>
70
+ <h2 id='h2string1' class='do-not-select do-not-bold'>&nbsp;</h1>
71
+ <h1 id='h1string1' class='do-not-select do-not-bold'>&nbsp;</h1>
72
+ <div id='trackInfo' class='do-not-select'>
73
+ <h3 id='trackInfo_trackName' class='do-not-bold' style='display: none;'>&nbsp;</h3>
74
+ <h4 id='trackInfo_albumName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
75
+ <h4 id='trackInfo_artistName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
76
+ <p id='trackInfo_copyright' style='display: none;'>&nbsp;</p>
77
+ </div>
78
+ </div>
79
+ <script>
80
+ let BASE_SETTINGS = {
81
+ base64var: {
82
+ pageTitle: 'R2Vuc2hpbiBJbXBhY3QgTXVzaWMgSnVrZWJveA==',
83
+ h2string1: 'R2Vuc2hpbiBJbXBhY3QgTXVzaWMgSnVrZWJveA=='
84
+ },
85
+ audioRootURL: 'https://raw.githubusercontent.com/daydreamer-json/discography_cdn_005/main/mhy/genshin',
86
+ playStartButtonText_init_pc: 'CLICK TO PLAY',
87
+ playStartButtonText_init_mobile: 'TAP TO PLAY',
88
+ playStartButtonText_loading: 'LOADING ...',
89
+ playStartButtonText_playing: 'NOW PLAYING',
90
+ trackInfoLabel_loading: 'Loading ...',
91
+ forceCompressedFormat: true
92
+ };
93
+ function detectMobileDevice() {
94
+ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
95
+ return 'mobile'
96
+ } else {
97
+ return 'pc'
98
+ }
99
+ }
100
+ function display_deobfuscate() {
101
+ document.title = atob(BASE_SETTINGS.base64var.pageTitle);
102
+ document.getElementById('h2string1').textContent = atob(BASE_SETTINGS.base64var.h2string1);
103
+ }
104
+ function randomTrackSelector(db) {
105
+ let random32bitArray = new Uint32Array(3);
106
+ window.crypto.getRandomValues(random32bitArray);
107
+ let randomizedAlbumIndex = random32bitArray[0] % db.list.length;
108
+ let randomizedDiscIndex = random32bitArray[1] % db.list[randomizedAlbumIndex].discs.length;
109
+ let randomizedTrackIndex = random32bitArray[2] % db.list[randomizedAlbumIndex].discs[randomizedDiscIndex].tracks.length;
110
+ return {
111
+ albumIndex: randomizedAlbumIndex,
112
+ discIndex: randomizedDiscIndex,
113
+ trackIndex: randomizedTrackIndex
114
+ };
115
+ }
116
+ function playAudioURLBuilder(db, randomTrackSelectorOutput) {
117
+ let deviceType = detectMobileDevice();
118
+ /*
119
+ let bpsArray = new Array();
120
+ for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length; i++) {
121
+ bpsArray.push(db.list[randomTrackSelectorOutput.albumIndex].availableFmts[i].bps);
122
+ };
123
+ bpsArray.sort((a, b) => b - a);
124
+ */
125
+ let formatPath = '';
126
+ let formatExt = '';
127
+ if (BASE_SETTINGS.forceCompressedFormat) {
128
+ formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
129
+ formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
130
+ } else if (deviceType == 'pc') {
131
+ formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].path;
132
+ formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].ext;
133
+ } else if (deviceType == 'mobile') {
134
+ formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
135
+ formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
136
+ }
137
+ let trackTotal = 0;
138
+ let trackCountArray = new Array();
139
+ for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].discs.length; i++) {
140
+ trackTotal += db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length;
141
+ trackCountArray.push(db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length);
142
+ };
143
+ let selectedTrackNum = 0;
144
+ if (randomTrackSelectorOutput.discIndex == 0) {
145
+ selectedTrackNum = randomTrackSelectorOutput.trackIndex + 1;
146
+ } else {
147
+ let E7BF25ECDBAAF938 = 0;
148
+ for (let i = 0; i < randomTrackSelectorOutput.discIndex; i++) {
149
+ E7BF25ECDBAAF938 += trackCountArray[i];
150
+ }
151
+ selectedTrackNum = E7BF25ECDBAAF938 + randomTrackSelectorOutput.trackIndex + 1;
152
+ }
153
+ let selectedTrackNumStr = '';
154
+ if (trackTotal >= 100) {
155
+ selectedTrackNumStr = selectedTrackNum.toString().padStart(3, '0');
156
+ } else if (trackTotal < 100) {
157
+ selectedTrackNumStr = selectedTrackNum.toString().padStart(2, '0');
158
+ }
159
+ let filename = encodeURIComponent(db.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'].replace(/'/g, '_'));
160
+ let buildedURL = `${BASE_SETTINGS.audioRootURL}/${db.list[randomTrackSelectorOutput.albumIndex].rootPath}/${formatPath}/${selectedTrackNumStr}_${filename}.${formatExt}`;
161
+ return buildedURL;
162
+ }
163
+ function playAudio() {
164
+ document.getElementById('h1string1').removeEventListener('click', playAudio);
165
+ if (typeof audioPlayer !== 'undefined') {
166
+ audioPlayer.unload();
167
+ };
168
+ fetch(`${BASE_SETTINGS.audioRootURL}/db.json`)
169
+ .then(response => response.json())
170
+ .then(data => {
171
+ console.log('Database loaded successfully');
172
+ const FILE_DATABASE = data;
173
+ let deviceType = detectMobileDevice();
174
+ let randomTrackSelectorOutput = randomTrackSelector(FILE_DATABASE);
175
+ var audioPlayer = new Howl ({
176
+ src: [playAudioURLBuilder(FILE_DATABASE, randomTrackSelectorOutput)],
177
+ html5: true
178
+ });
179
+ window.audioPlayer = audioPlayer;
180
+ document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_loading;
181
+ document.getElementById('trackInfo_trackName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
182
+ document.getElementById('trackInfo_albumName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
183
+ document.getElementById('trackInfo_artistName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
184
+ document.getElementById('trackInfo_copyright').textContent = BASE_SETTINGS.trackInfoLabel_loading;
185
+ audioPlayer.on('loaderror', function(){
186
+ console.error('Audio "loaderror" has occured. Retrying ...');
187
+ playAudio();
188
+ });
189
+ audioPlayer.on('playerror', function(){
190
+ console.error('Audio "playerror" has occured. Retrying ...');
191
+ playAudio();
192
+ });
193
+ audioPlayer.on('load', function(){
194
+ audioPlayer.play();
195
+ document.getElementById('h1string1').addEventListener('click', playAudio);
196
+ document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_playing;
197
+ console.log(`Now playing "${FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US']}"`);
198
+ console.log(`URL: ${audioPlayer._src}`);
199
+ document.getElementById('trackInfo_trackName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'];
200
+ document.getElementById('trackInfo_albumName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumTitle;
201
+ document.getElementById('trackInfo_artistName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumArtist;
202
+ document.getElementById('trackInfo_copyright').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].copyright;
203
+ document.getElementById('cover_bg').src = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].coverExtLink;
204
+ if (document.getElementById('trackInfo_trackName').style.display == 'none' && document.getElementById('trackInfo_albumName').style.display == 'none' && document.getElementById('trackInfo_artistName').style.display == 'none' && document.getElementById('trackInfo_copyright').style.display == 'none' && document.getElementById('cover_bg').style.display == 'none') {
205
+ document.getElementById('trackInfo_trackName').style.display = 'block';
206
+ document.getElementById('trackInfo_albumName').style.display = 'block';
207
+ document.getElementById('trackInfo_artistName').style.display = 'block';
208
+ document.getElementById('trackInfo_copyright').style.display = 'block';
209
+ document.getElementById('cover_bg').style.display = 'block';
210
+ }
211
+ audioPlayer.on('end', playAudio);
212
+ });
213
+ })
214
+ .catch(error => {
215
+ console.error(error);
216
+ alert('Failed to load database file');
217
+ });
218
+ }
219
+ document.addEventListener('DOMContentLoaded', function() {
220
+ display_deobfuscate();
221
+ let deviceType = detectMobileDevice();
222
+ if (deviceType == 'pc') {
223
+ document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_pc;
224
+ } else if (deviceType == 'mobile') {
225
+ document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_mobile;
226
+ };
227
+ var audioPlayer = new Howl ({
228
+ src: ['https://archive.org/download/audio-silent-wavs-one-second-half-second-quarter-second/silent_quarter-second.mp3']
229
+ });
230
+ window.audioPlayer = audioPlayer;
231
+ });
232
+ window.onload = function () {
233
+ document.getElementById('h1string1').addEventListener('click', playAudio);
234
+ }
235
+ </script>
236
+ </body>
237
  </html>
gi_jukebox_copy.html CHANGED
@@ -1,268 +1,268 @@
1
- <!DOCTYPE html>
2
- <html lang='en'>
3
- <head>
4
- <title>N/A</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://cdn.plyr.io/3.7.3/plyr.js"></script>
11
- <script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
12
- <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
13
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
14
- <link href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css" rel="stylesheet" type="text/css" media="all">
15
- <style>
16
- html, body {
17
- color: #fff;
18
- background: #000;
19
- margin: 0;
20
- padding: 0;
21
- line-height: 1;
22
- width: 100vw;
23
- height: 100vh;
24
- font-family: 'SDK_JP_Web', system-ui;
25
- }
26
- #h2string1, #h2string2 {
27
- margin: 0;
28
- padding: 0;
29
- line-height: 1;
30
- }
31
- #main {
32
- position: absolute;
33
- top: 50%;
34
- left: 50%;
35
- transform: translate(-50%, -50%);
36
- text-align: center;
37
- margin: 0;
38
- padding: 0;
39
- white-space: normal;
40
- letter-spacing: -0.02em;
41
- text-shadow: 0 0 30px #cccccc;
42
- z-index: 100;
43
- }
44
- #cover_bg_container {
45
- width: 100vw;
46
- height: 100vh;
47
- overflow: hidden;
48
- }
49
- #cover_bg {
50
- z-index: 95;
51
- width: 100vw;
52
- height: 100vh;
53
- opacity: 0.3;
54
- object-fit: cover;
55
- object-position: 50% 50%;
56
- }
57
- #trackInfoContainer {
58
- position: absolute;
59
- top: 50%;
60
- left: 50%;
61
- transform: translate(-50%, -50%);
62
- text-align: center;
63
- margin: 0;
64
- padding: 0;
65
- white-space: normal;
66
- letter-spacing: -0.02em;
67
- text-shadow: 0 0 30px #cccccc;
68
- z-index: 150;
69
- }
70
- #trackInfoBgMask {
71
- width: 100vw;
72
- height: 100vh;
73
- text-align: center;
74
- margin: 0;
75
- padding: 0;
76
- white-space: normal;
77
- letter-spacing: -0.02em;
78
- background: rgba(0, 0, 0, 0.01);
79
- backdrop-filter: blur(20px);
80
- z-index: 149;
81
- }
82
- .do-not-select {
83
- user-select: none;
84
- }
85
- .do-not-bold {
86
- font-weight: normal;
87
- }
88
- </style>
89
- </head>
90
- <body>
91
- <div id='cover_bg_container'>
92
- <img id='cover_bg' src='' style='display: none;'>
93
- </div>
94
- <div id='main'>
95
- <h2 id='h2string1' class='do-not-select do-not-bold'>&nbsp;</h1>
96
- <h1 id='h1string1' class='do-not-select do-not-bold'>&nbsp;</h1>
97
- <div id='trackInfo' class='do-not-select'>
98
- <h3 id='trackInfo_trackName' class='do-not-bold' style='display: none;'>&nbsp;</h3>
99
- <h4 id='trackInfo_albumName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
100
- <h4 id='trackInfo_artistName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
101
- <p id='trackInfo_copyright' style='display: none;'>&nbsp;</p>
102
- </div>
103
- </div>
104
- <div id='trackInfoBgMask'><p>&nbsp;</p></div>
105
- <div id='trackInfoContainer' class='do-not-select'>
106
- <h2 id='h2string2' class='do-not-select do-not-bold'>Album External Links</h2>
107
- <p><a href=''>Apple Music</a></p>
108
- <p><a href=''>Spotify</a></p>
109
- <p><a href=''>VGMdb</a></p>
110
- <p><a href=''>MusicBrainz</a></p>
111
- </div>
112
- <script>
113
- let BASE_SETTINGS = {
114
- base64var: {
115
- pageTitle: 'R2Vuc2hpbiBJbXBhY3QgTXVzaWMgSnVrZWJveA==',
116
- h2string1: 'R2Vuc2hpbiBJbXBhY3QgTXVzaWMgSnVrZWJveA=='
117
- },
118
- audioRootURL: 'https://raw.githubusercontent.com/daydreamer-json/discography_cdn_005/main/mhy/genshin',
119
- playStartButtonText_init_pc: 'CLICK TO PLAY',
120
- playStartButtonText_init_mobile: 'TAP TO PLAY',
121
- playStartButtonText_loading: 'LOADING ...',
122
- playStartButtonText_playing: 'NOW PLAYING',
123
- trackInfoLabel_loading: 'Loading ...',
124
- forceCompressedFormat: true
125
- };
126
- function detectMobileDevice() {
127
- if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
128
- return 'mobile'
129
- } else {
130
- return 'pc'
131
- }
132
- }
133
- function display_deobfuscate() {
134
- document.title = atob(BASE_SETTINGS.base64var.pageTitle);
135
- document.getElementById('h2string1').textContent = atob(BASE_SETTINGS.base64var.h2string1);
136
- }
137
- function randomTrackSelector(db) {
138
- let randomizedAlbumIndex = Math.floor(Math.random() * db.list.length);
139
- let randomizedDiscIndex = Math.floor(Math.random() * db.list[randomizedAlbumIndex].discs.length);
140
- let randomizedTrackIndex = Math.floor(Math.random() * db.list[randomizedAlbumIndex].discs[randomizedDiscIndex].tracks.length);
141
- return {
142
- albumIndex: randomizedAlbumIndex,
143
- discIndex: randomizedDiscIndex,
144
- trackIndex: randomizedTrackIndex
145
- };
146
- }
147
- function playAudioURLBuilder(db, randomTrackSelectorOutput) {
148
- let deviceType = detectMobileDevice();
149
- /*
150
- let bpsArray = new Array();
151
- for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length; i++) {
152
- bpsArray.push(db.list[randomTrackSelectorOutput.albumIndex].availableFmts[i].bps);
153
- };
154
- bpsArray.sort((a, b) => b - a);
155
- */
156
- let formatPath = '';
157
- let formatExt = '';
158
- if (BASE_SETTINGS.forceCompressedFormat) {
159
- formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
160
- formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
161
- } else if (deviceType == 'pc') {
162
- formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].path;
163
- formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].ext;
164
- } else if (deviceType == 'mobile') {
165
- formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
166
- formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
167
- }
168
- let trackTotal = 0;
169
- let trackCountArray = new Array();
170
- for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].discs.length; i++) {
171
- trackTotal += db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length;
172
- trackCountArray.push(db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length);
173
- };
174
- let selectedTrackNum = 0;
175
- if (randomTrackSelectorOutput.discIndex == 0) {
176
- selectedTrackNum = randomTrackSelectorOutput.trackIndex + 1;
177
- } else {
178
- let E7BF25ECDBAAF938 = 0;
179
- for (let i = 0; i < randomTrackSelectorOutput.discIndex; i++) {
180
- E7BF25ECDBAAF938 += trackCountArray[i];
181
- }
182
- selectedTrackNum = E7BF25ECDBAAF938 + randomTrackSelectorOutput.trackIndex + 1;
183
- }
184
- let selectedTrackNumStr = '';
185
- if (trackTotal >= 100) {
186
- selectedTrackNumStr = selectedTrackNum.toString().padStart(3, '0');
187
- } else if (trackTotal < 100) {
188
- selectedTrackNumStr = selectedTrackNum.toString().padStart(2, '0');
189
- }
190
- let filename = encodeURIComponent(db.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'].replace(/'/g, '_'));
191
- let buildedURL = `${BASE_SETTINGS.audioRootURL}/${db.list[randomTrackSelectorOutput.albumIndex].rootPath}/${formatPath}/${selectedTrackNumStr}_${filename}.${formatExt}`;
192
- return buildedURL;
193
- }
194
- function playAudio() {
195
- document.getElementById('h1string1').removeEventListener('click', playAudio);
196
- if (typeof audioPlayer !== 'undefined') {
197
- audioPlayer.unload();
198
- };
199
- fetch(`${BASE_SETTINGS.audioRootURL}/db.json`)
200
- .then(response => response.json())
201
- .then(data => {
202
- console.log('Database loaded successfully');
203
- const FILE_DATABASE = data;
204
- let deviceType = detectMobileDevice();
205
- let randomTrackSelectorOutput = randomTrackSelector(FILE_DATABASE);
206
- var audioPlayer = new Howl ({
207
- src: [playAudioURLBuilder(FILE_DATABASE, randomTrackSelectorOutput)],
208
- html5: true
209
- });
210
- window.audioPlayer = audioPlayer;
211
- document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_loading;
212
- document.getElementById('trackInfo_trackName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
213
- document.getElementById('trackInfo_albumName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
214
- document.getElementById('trackInfo_artistName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
215
- document.getElementById('trackInfo_copyright').textContent = BASE_SETTINGS.trackInfoLabel_loading;
216
- audioPlayer.on('loaderror', function(){
217
- console.error('Audio "loaderror" has occured. Retrying ...');
218
- playAudio();
219
- });
220
- audioPlayer.on('playerror', function(){
221
- console.error('Audio "playerror" has occured. Retrying ...');
222
- playAudio();
223
- });
224
- audioPlayer.on('load', function(){
225
- audioPlayer.play();
226
- document.getElementById('h1string1').addEventListener('click', playAudio);
227
- document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_playing;
228
- console.log(`Now playing "${FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US']}"`);
229
- console.log(`URL: ${audioPlayer._src}`);
230
- document.getElementById('trackInfo_trackName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'];
231
- document.getElementById('trackInfo_albumName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumTitle;
232
- document.getElementById('trackInfo_artistName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumArtist;
233
- document.getElementById('trackInfo_copyright').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].copyright;
234
- document.getElementById('cover_bg').src = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].coverExtLink;
235
- if (document.getElementById('trackInfo_trackName').style.display == 'none' && document.getElementById('trackInfo_albumName').style.display == 'none' && document.getElementById('trackInfo_artistName').style.display == 'none' && document.getElementById('trackInfo_copyright').style.display == 'none' && document.getElementById('cover_bg').style.display == 'none') {
236
- document.getElementById('trackInfo_trackName').style.display = 'block';
237
- document.getElementById('trackInfo_albumName').style.display = 'block';
238
- document.getElementById('trackInfo_artistName').style.display = 'block';
239
- document.getElementById('trackInfo_copyright').style.display = 'block';
240
- document.getElementById('cover_bg').style.display = 'block';
241
- }
242
- audioPlayer.on('end', playAudio);
243
- });
244
- })
245
- .catch(error => {
246
- console.error(error);
247
- alert('Failed to load database file');
248
- });
249
- }
250
- document.addEventListener('DOMContentLoaded', function() {
251
- display_deobfuscate();
252
- let deviceType = detectMobileDevice();
253
- if (deviceType == 'pc') {
254
- document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_pc;
255
- } else if (deviceType == 'mobile') {
256
- document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_mobile;
257
- };
258
- var audioPlayer = new Howl ({
259
- src: ['https://archive.org/download/audio-silent-wavs-one-second-half-second-quarter-second/silent_quarter-second.mp3']
260
- });
261
- window.audioPlayer = audioPlayer;
262
- });
263
- window.onload = function () {
264
- document.getElementById('h1string1').addEventListener('click', playAudio);
265
- }
266
- </script>
267
- </body>
268
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang='en'>
3
+ <head>
4
+ <title>N/A</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://cdn.plyr.io/3.7.3/plyr.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
13
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
14
+ <link href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css" rel="stylesheet" type="text/css" media="all">
15
+ <style>
16
+ html, body {
17
+ color: #fff;
18
+ background: #000;
19
+ margin: 0;
20
+ padding: 0;
21
+ line-height: 1;
22
+ width: 100vw;
23
+ height: 100vh;
24
+ font-family: 'SDK_JP_Web', system-ui;
25
+ }
26
+ #h2string1, #h2string2 {
27
+ margin: 0;
28
+ padding: 0;
29
+ line-height: 1;
30
+ }
31
+ #main {
32
+ position: absolute;
33
+ top: 50%;
34
+ left: 50%;
35
+ transform: translate(-50%, -50%);
36
+ text-align: center;
37
+ margin: 0;
38
+ padding: 0;
39
+ white-space: normal;
40
+ letter-spacing: -0.02em;
41
+ text-shadow: 0 0 30px #cccccc;
42
+ z-index: 100;
43
+ }
44
+ #cover_bg_container {
45
+ width: 100vw;
46
+ height: 100vh;
47
+ overflow: hidden;
48
+ }
49
+ #cover_bg {
50
+ z-index: 95;
51
+ width: 100vw;
52
+ height: 100vh;
53
+ opacity: 0.3;
54
+ object-fit: cover;
55
+ object-position: 50% 50%;
56
+ }
57
+ #trackInfoContainer {
58
+ position: absolute;
59
+ top: 50%;
60
+ left: 50%;
61
+ transform: translate(-50%, -50%);
62
+ text-align: center;
63
+ margin: 0;
64
+ padding: 0;
65
+ white-space: normal;
66
+ letter-spacing: -0.02em;
67
+ text-shadow: 0 0 30px #cccccc;
68
+ z-index: 150;
69
+ }
70
+ #trackInfoBgMask {
71
+ width: 100vw;
72
+ height: 100vh;
73
+ text-align: center;
74
+ margin: 0;
75
+ padding: 0;
76
+ white-space: normal;
77
+ letter-spacing: -0.02em;
78
+ background: rgba(0, 0, 0, 0.01);
79
+ backdrop-filter: blur(20px);
80
+ z-index: 149;
81
+ }
82
+ .do-not-select {
83
+ user-select: none;
84
+ }
85
+ .do-not-bold {
86
+ font-weight: normal;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body>
91
+ <div id='cover_bg_container'>
92
+ <img id='cover_bg' src='' style='display: none;'>
93
+ </div>
94
+ <div id='main'>
95
+ <h2 id='h2string1' class='do-not-select do-not-bold'>&nbsp;</h1>
96
+ <h1 id='h1string1' class='do-not-select do-not-bold'>&nbsp;</h1>
97
+ <div id='trackInfo' class='do-not-select'>
98
+ <h3 id='trackInfo_trackName' class='do-not-bold' style='display: none;'>&nbsp;</h3>
99
+ <h4 id='trackInfo_albumName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
100
+ <h4 id='trackInfo_artistName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
101
+ <p id='trackInfo_copyright' style='display: none;'>&nbsp;</p>
102
+ </div>
103
+ </div>
104
+ <div id='trackInfoBgMask'><p>&nbsp;</p></div>
105
+ <div id='trackInfoContainer' class='do-not-select'>
106
+ <h2 id='h2string2' class='do-not-select do-not-bold'>Album External Links</h2>
107
+ <p><a href=''>Apple Music</a></p>
108
+ <p><a href=''>Spotify</a></p>
109
+ <p><a href=''>VGMdb</a></p>
110
+ <p><a href=''>MusicBrainz</a></p>
111
+ </div>
112
+ <script>
113
+ let BASE_SETTINGS = {
114
+ base64var: {
115
+ pageTitle: 'R2Vuc2hpbiBJbXBhY3QgTXVzaWMgSnVrZWJveA==',
116
+ h2string1: 'R2Vuc2hpbiBJbXBhY3QgTXVzaWMgSnVrZWJveA=='
117
+ },
118
+ audioRootURL: 'https://raw.githubusercontent.com/daydreamer-json/discography_cdn_005/main/mhy/genshin',
119
+ playStartButtonText_init_pc: 'CLICK TO PLAY',
120
+ playStartButtonText_init_mobile: 'TAP TO PLAY',
121
+ playStartButtonText_loading: 'LOADING ...',
122
+ playStartButtonText_playing: 'NOW PLAYING',
123
+ trackInfoLabel_loading: 'Loading ...',
124
+ forceCompressedFormat: true
125
+ };
126
+ function detectMobileDevice() {
127
+ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
128
+ return 'mobile'
129
+ } else {
130
+ return 'pc'
131
+ }
132
+ }
133
+ function display_deobfuscate() {
134
+ document.title = atob(BASE_SETTINGS.base64var.pageTitle);
135
+ document.getElementById('h2string1').textContent = atob(BASE_SETTINGS.base64var.h2string1);
136
+ }
137
+ function randomTrackSelector(db) {
138
+ let randomizedAlbumIndex = Math.floor(Math.random() * db.list.length);
139
+ let randomizedDiscIndex = Math.floor(Math.random() * db.list[randomizedAlbumIndex].discs.length);
140
+ let randomizedTrackIndex = Math.floor(Math.random() * db.list[randomizedAlbumIndex].discs[randomizedDiscIndex].tracks.length);
141
+ return {
142
+ albumIndex: randomizedAlbumIndex,
143
+ discIndex: randomizedDiscIndex,
144
+ trackIndex: randomizedTrackIndex
145
+ };
146
+ }
147
+ function playAudioURLBuilder(db, randomTrackSelectorOutput) {
148
+ let deviceType = detectMobileDevice();
149
+ /*
150
+ let bpsArray = new Array();
151
+ for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length; i++) {
152
+ bpsArray.push(db.list[randomTrackSelectorOutput.albumIndex].availableFmts[i].bps);
153
+ };
154
+ bpsArray.sort((a, b) => b - a);
155
+ */
156
+ let formatPath = '';
157
+ let formatExt = '';
158
+ if (BASE_SETTINGS.forceCompressedFormat) {
159
+ formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
160
+ formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
161
+ } else if (deviceType == 'pc') {
162
+ formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].path;
163
+ formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].ext;
164
+ } else if (deviceType == 'mobile') {
165
+ formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
166
+ formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
167
+ }
168
+ let trackTotal = 0;
169
+ let trackCountArray = new Array();
170
+ for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].discs.length; i++) {
171
+ trackTotal += db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length;
172
+ trackCountArray.push(db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length);
173
+ };
174
+ let selectedTrackNum = 0;
175
+ if (randomTrackSelectorOutput.discIndex == 0) {
176
+ selectedTrackNum = randomTrackSelectorOutput.trackIndex + 1;
177
+ } else {
178
+ let E7BF25ECDBAAF938 = 0;
179
+ for (let i = 0; i < randomTrackSelectorOutput.discIndex; i++) {
180
+ E7BF25ECDBAAF938 += trackCountArray[i];
181
+ }
182
+ selectedTrackNum = E7BF25ECDBAAF938 + randomTrackSelectorOutput.trackIndex + 1;
183
+ }
184
+ let selectedTrackNumStr = '';
185
+ if (trackTotal >= 100) {
186
+ selectedTrackNumStr = selectedTrackNum.toString().padStart(3, '0');
187
+ } else if (trackTotal < 100) {
188
+ selectedTrackNumStr = selectedTrackNum.toString().padStart(2, '0');
189
+ }
190
+ let filename = encodeURIComponent(db.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'].replace(/'/g, '_'));
191
+ let buildedURL = `${BASE_SETTINGS.audioRootURL}/${db.list[randomTrackSelectorOutput.albumIndex].rootPath}/${formatPath}/${selectedTrackNumStr}_${filename}.${formatExt}`;
192
+ return buildedURL;
193
+ }
194
+ function playAudio() {
195
+ document.getElementById('h1string1').removeEventListener('click', playAudio);
196
+ if (typeof audioPlayer !== 'undefined') {
197
+ audioPlayer.unload();
198
+ };
199
+ fetch(`${BASE_SETTINGS.audioRootURL}/db.json`)
200
+ .then(response => response.json())
201
+ .then(data => {
202
+ console.log('Database loaded successfully');
203
+ const FILE_DATABASE = data;
204
+ let deviceType = detectMobileDevice();
205
+ let randomTrackSelectorOutput = randomTrackSelector(FILE_DATABASE);
206
+ var audioPlayer = new Howl ({
207
+ src: [playAudioURLBuilder(FILE_DATABASE, randomTrackSelectorOutput)],
208
+ html5: true
209
+ });
210
+ window.audioPlayer = audioPlayer;
211
+ document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_loading;
212
+ document.getElementById('trackInfo_trackName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
213
+ document.getElementById('trackInfo_albumName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
214
+ document.getElementById('trackInfo_artistName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
215
+ document.getElementById('trackInfo_copyright').textContent = BASE_SETTINGS.trackInfoLabel_loading;
216
+ audioPlayer.on('loaderror', function(){
217
+ console.error('Audio "loaderror" has occured. Retrying ...');
218
+ playAudio();
219
+ });
220
+ audioPlayer.on('playerror', function(){
221
+ console.error('Audio "playerror" has occured. Retrying ...');
222
+ playAudio();
223
+ });
224
+ audioPlayer.on('load', function(){
225
+ audioPlayer.play();
226
+ document.getElementById('h1string1').addEventListener('click', playAudio);
227
+ document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_playing;
228
+ console.log(`Now playing "${FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US']}"`);
229
+ console.log(`URL: ${audioPlayer._src}`);
230
+ document.getElementById('trackInfo_trackName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'];
231
+ document.getElementById('trackInfo_albumName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumTitle;
232
+ document.getElementById('trackInfo_artistName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumArtist;
233
+ document.getElementById('trackInfo_copyright').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].copyright;
234
+ document.getElementById('cover_bg').src = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].coverExtLink;
235
+ if (document.getElementById('trackInfo_trackName').style.display == 'none' && document.getElementById('trackInfo_albumName').style.display == 'none' && document.getElementById('trackInfo_artistName').style.display == 'none' && document.getElementById('trackInfo_copyright').style.display == 'none' && document.getElementById('cover_bg').style.display == 'none') {
236
+ document.getElementById('trackInfo_trackName').style.display = 'block';
237
+ document.getElementById('trackInfo_albumName').style.display = 'block';
238
+ document.getElementById('trackInfo_artistName').style.display = 'block';
239
+ document.getElementById('trackInfo_copyright').style.display = 'block';
240
+ document.getElementById('cover_bg').style.display = 'block';
241
+ }
242
+ audioPlayer.on('end', playAudio);
243
+ });
244
+ })
245
+ .catch(error => {
246
+ console.error(error);
247
+ alert('Failed to load database file');
248
+ });
249
+ }
250
+ document.addEventListener('DOMContentLoaded', function() {
251
+ display_deobfuscate();
252
+ let deviceType = detectMobileDevice();
253
+ if (deviceType == 'pc') {
254
+ document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_pc;
255
+ } else if (deviceType == 'mobile') {
256
+ document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_mobile;
257
+ };
258
+ var audioPlayer = new Howl ({
259
+ src: ['https://archive.org/download/audio-silent-wavs-one-second-half-second-quarter-second/silent_quarter-second.mp3']
260
+ });
261
+ window.audioPlayer = audioPlayer;
262
+ });
263
+ window.onload = function () {
264
+ document.getElementById('h1string1').addEventListener('click', playAudio);
265
+ }
266
+ </script>
267
+ </body>
268
  </html>
hi_jukebox.html CHANGED
@@ -1,227 +1,227 @@
1
- <!DOCTYPE html>
2
- <html lang='en'>
3
- <head>
4
- <title>N/A</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://cdn.plyr.io/3.7.3/plyr.js"></script>
11
- <script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
12
- <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
13
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
14
- <link href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css" rel="stylesheet" type="text/css" media="all">
15
- <style>
16
- html, body {
17
- color: #fff;
18
- background: #000;
19
- margin: 0;
20
- padding: 0;
21
- line-height: 1;
22
- width: 100vw;
23
- height: 100vh;
24
- font-family: 'SDK_JP_Web', system-ui;
25
- }
26
- #h2string1 {
27
- margin: 0;
28
- padding: 0;
29
- line-height: 1;
30
- }
31
- #main {
32
- position: absolute;
33
- top: 50%;
34
- left: 50%;
35
- transform: translate(-50%, -50%);
36
- text-align: center;
37
- margin: 0;
38
- padding: 0;
39
- white-space: normal;
40
- letter-spacing: -0.02em;
41
- text-shadow: 0 0 30px #cccccc;
42
- z-index: 100;
43
- }
44
- #cover_bg_container {
45
- width: 100vw;
46
- height: 100vh;
47
- overflow: hidden;
48
- }
49
- #cover_bg {
50
- z-index: 95;
51
- width: 100vw;
52
- height: 100vh;
53
- opacity: 0.3;
54
- object-fit: cover;
55
- object-position: 50% 50%;
56
- }
57
- .do-not-select {
58
- user-select: none;
59
- }
60
- .do-not-bold {
61
- font-weight: normal;
62
- }
63
- </style>
64
- </head>
65
- <body>
66
- <div id='cover_bg_container'>
67
- <img id='cover_bg' src='' style='display: none;'>
68
- </div>
69
- <div id='main'>
70
- <h2 id='h2string1' class='do-not-select do-not-bold'>&nbsp;</h1>
71
- <h1 id='h1string1' class='do-not-select do-not-bold'>&nbsp;</h1>
72
- <div id='trackInfo' class='do-not-select'>
73
- <h3 id='trackInfo_trackName' class='do-not-bold' style='display: none;'>&nbsp;</h3>
74
- <h4 id='trackInfo_albumName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
75
- <h4 id='trackInfo_artistName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
76
- <p id='trackInfo_copyright' style='display: none;'>&nbsp;</p>
77
- </div>
78
- </div>
79
- <script>
80
- const BASE_SETTINGS = {
81
- base64var: {
82
- pageTitle: 'SG9ua2FpIEltcGFjdCBNdXNpYyBKdWtlYm94',
83
- h2string1: 'SG9ua2FpIEltcGFjdCBNdXNpYyBKdWtlYm94'
84
- },
85
- audioRootURL: 'https://raw.githubusercontent.com/daydreamer-json/discography_cdn_005/main/mhy/honkai',
86
- playStartButtonText_init_pc: 'CLICK TO PLAY',
87
- playStartButtonText_init_mobile: 'TAP TO PLAY',
88
- playStartButtonText_loading: 'LOADING ...',
89
- playStartButtonText_playing: 'NOW PLAYING',
90
- trackInfoLabel_loading: 'Loading ...',
91
- forceCompressedFormat: true
92
- };
93
- function detectMobileDevice() {
94
- if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
95
- return 'mobile'
96
- } else {
97
- return 'pc'
98
- }
99
- }
100
- function display_deobfuscate() {
101
- document.title = atob(BASE_SETTINGS.base64var.pageTitle);
102
- document.getElementById('h2string1').textContent = atob(BASE_SETTINGS.base64var.h2string1);
103
- }
104
- function randomTrackSelector(db) {
105
- let randomizedAlbumIndex = Math.floor(Math.random() * db.list.length);
106
- let randomizedDiscIndex = Math.floor(Math.random() * db.list[randomizedAlbumIndex].discs.length);
107
- let randomizedTrackIndex = Math.floor(Math.random() * db.list[randomizedAlbumIndex].discs[randomizedDiscIndex].tracks.length);
108
- return {
109
- albumIndex: randomizedAlbumIndex,
110
- discIndex: randomizedDiscIndex,
111
- trackIndex: randomizedTrackIndex
112
- };
113
- }
114
- function playAudioURLBuilder(db, randomTrackSelectorOutput) {
115
- let deviceType = detectMobileDevice();
116
- /*
117
- let bpsArray = new Array();
118
- for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length; i++) {
119
- bpsArray.push(db.list[randomTrackSelectorOutput.albumIndex].availableFmts[i].bps);
120
- };
121
- bpsArray.sort((a, b) => b - a);
122
- */
123
- let formatPath = '';
124
- let formatExt = '';
125
- if (BASE_SETTINGS.forceCompressedFormat) {
126
- formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
127
- formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
128
- } else if (deviceType == 'pc') {
129
- formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].path;
130
- formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].ext;
131
- } else if (deviceType == 'mobile') {
132
- formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
133
- formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
134
- }
135
- let trackTotal = 0;
136
- let trackCountArray = new Array();
137
- for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].discs.length; i++) {
138
- trackTotal += db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length;
139
- trackCountArray.push(db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length);
140
- };
141
- let selectedTrackNum = 0;
142
- if (randomTrackSelectorOutput.discIndex == 0) {
143
- selectedTrackNum = randomTrackSelectorOutput.trackIndex + 1;
144
- } else {
145
- let E7BF25ECDBAAF938 = 0;
146
- for (let i = 0; i < randomTrackSelectorOutput.discIndex; i++) {
147
- E7BF25ECDBAAF938 += trackCountArray[i];
148
- }
149
- selectedTrackNum = E7BF25ECDBAAF938 + randomTrackSelectorOutput.trackIndex + 1;
150
- }
151
- let selectedTrackNumStr = '';
152
- if (trackTotal >= 100) {
153
- selectedTrackNumStr = selectedTrackNum.toString().padStart(3, '0');
154
- } else if (trackTotal < 100) {
155
- selectedTrackNumStr = selectedTrackNum.toString().padStart(2, '0');
156
- }
157
- let filename = encodeURIComponent(db.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'].replace(/'/g, '_'));
158
- let buildedURL = `${BASE_SETTINGS.audioRootURL}/${db.list[randomTrackSelectorOutput.albumIndex].rootPath}/${formatPath}/${selectedTrackNumStr}_${filename}.${formatExt}`;
159
- return buildedURL;
160
- }
161
- function playAudio() {
162
- document.getElementById('h1string1').removeEventListener('click', playAudio);
163
- if (typeof audioPlayer !== 'undefined') {
164
- audioPlayer.unload();
165
- };
166
- fetch(`${BASE_SETTINGS.audioRootURL}/db.json`)
167
- .then(response => response.json())
168
- .then(data => {
169
- console.log('Database loaded successfully');
170
- const FILE_DATABASE = data;
171
- let deviceType = detectMobileDevice();
172
- let randomTrackSelectorOutput = randomTrackSelector(FILE_DATABASE);
173
- var audioPlayer = new Howl ({
174
- src: [playAudioURLBuilder(FILE_DATABASE, randomTrackSelectorOutput)],
175
- html5: true
176
- });
177
- window.audioPlayer = audioPlayer;
178
- document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_loading;
179
- document.getElementById('trackInfo_trackName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
180
- document.getElementById('trackInfo_albumName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
181
- document.getElementById('trackInfo_artistName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
182
- document.getElementById('trackInfo_copyright').textContent = BASE_SETTINGS.trackInfoLabel_loading;
183
- audioPlayer.on('load', function(){
184
- audioPlayer.play();
185
- document.getElementById('h1string1').addEventListener('click', playAudio);
186
- document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_playing;
187
- console.log(`Now playing "${FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US']}"`);
188
- console.log(`URL: ${audioPlayer._src}`);
189
- document.getElementById('trackInfo_trackName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'];
190
- document.getElementById('trackInfo_albumName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumTitle;
191
- document.getElementById('trackInfo_artistName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumArtist;
192
- document.getElementById('trackInfo_copyright').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].copyright;
193
- document.getElementById('cover_bg').src = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].coverExtLink;
194
- if (document.getElementById('trackInfo_trackName').style.display == 'none' && document.getElementById('trackInfo_albumName').style.display == 'none' && document.getElementById('trackInfo_artistName').style.display == 'none' && document.getElementById('trackInfo_copyright').style.display == 'none' && document.getElementById('cover_bg').style.display == 'none') {
195
- document.getElementById('trackInfo_trackName').style.display = 'block';
196
- document.getElementById('trackInfo_albumName').style.display = 'block';
197
- document.getElementById('trackInfo_artistName').style.display = 'block';
198
- document.getElementById('trackInfo_copyright').style.display = 'block';
199
- document.getElementById('cover_bg').style.display = 'block';
200
- }
201
- audioPlayer.on('end', playAudio);
202
- });
203
- })
204
- .catch(error => {
205
- console.error(error);
206
- alert('Failed to load database file');
207
- });
208
- }
209
- document.addEventListener('DOMContentLoaded', function() {
210
- display_deobfuscate();
211
- let deviceType = detectMobileDevice();
212
- if (deviceType == 'pc') {
213
- document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_pc;
214
- } else if (deviceType == 'mobile') {
215
- document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_mobile;
216
- };
217
- var audioPlayer = new Howl ({
218
- src: ['https://archive.org/download/audio-silent-wavs-one-second-half-second-quarter-second/silent_quarter-second.mp3']
219
- });
220
- window.audioPlayer = audioPlayer;
221
- });
222
- window.onload = function () {
223
- document.getElementById('h1string1').addEventListener('click', playAudio);
224
- }
225
- </script>
226
- </body>
227
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang='en'>
3
+ <head>
4
+ <title>N/A</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://cdn.plyr.io/3.7.3/plyr.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
13
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
14
+ <link href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css" rel="stylesheet" type="text/css" media="all">
15
+ <style>
16
+ html, body {
17
+ color: #fff;
18
+ background: #000;
19
+ margin: 0;
20
+ padding: 0;
21
+ line-height: 1;
22
+ width: 100vw;
23
+ height: 100vh;
24
+ font-family: 'SDK_JP_Web', system-ui;
25
+ }
26
+ #h2string1 {
27
+ margin: 0;
28
+ padding: 0;
29
+ line-height: 1;
30
+ }
31
+ #main {
32
+ position: absolute;
33
+ top: 50%;
34
+ left: 50%;
35
+ transform: translate(-50%, -50%);
36
+ text-align: center;
37
+ margin: 0;
38
+ padding: 0;
39
+ white-space: normal;
40
+ letter-spacing: -0.02em;
41
+ text-shadow: 0 0 30px #cccccc;
42
+ z-index: 100;
43
+ }
44
+ #cover_bg_container {
45
+ width: 100vw;
46
+ height: 100vh;
47
+ overflow: hidden;
48
+ }
49
+ #cover_bg {
50
+ z-index: 95;
51
+ width: 100vw;
52
+ height: 100vh;
53
+ opacity: 0.3;
54
+ object-fit: cover;
55
+ object-position: 50% 50%;
56
+ }
57
+ .do-not-select {
58
+ user-select: none;
59
+ }
60
+ .do-not-bold {
61
+ font-weight: normal;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body>
66
+ <div id='cover_bg_container'>
67
+ <img id='cover_bg' src='' style='display: none;'>
68
+ </div>
69
+ <div id='main'>
70
+ <h2 id='h2string1' class='do-not-select do-not-bold'>&nbsp;</h1>
71
+ <h1 id='h1string1' class='do-not-select do-not-bold'>&nbsp;</h1>
72
+ <div id='trackInfo' class='do-not-select'>
73
+ <h3 id='trackInfo_trackName' class='do-not-bold' style='display: none;'>&nbsp;</h3>
74
+ <h4 id='trackInfo_albumName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
75
+ <h4 id='trackInfo_artistName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
76
+ <p id='trackInfo_copyright' style='display: none;'>&nbsp;</p>
77
+ </div>
78
+ </div>
79
+ <script>
80
+ const BASE_SETTINGS = {
81
+ base64var: {
82
+ pageTitle: 'SG9ua2FpIEltcGFjdCBNdXNpYyBKdWtlYm94',
83
+ h2string1: 'SG9ua2FpIEltcGFjdCBNdXNpYyBKdWtlYm94'
84
+ },
85
+ audioRootURL: 'https://raw.githubusercontent.com/daydreamer-json/discography_cdn_005/main/mhy/honkai',
86
+ playStartButtonText_init_pc: 'CLICK TO PLAY',
87
+ playStartButtonText_init_mobile: 'TAP TO PLAY',
88
+ playStartButtonText_loading: 'LOADING ...',
89
+ playStartButtonText_playing: 'NOW PLAYING',
90
+ trackInfoLabel_loading: 'Loading ...',
91
+ forceCompressedFormat: true
92
+ };
93
+ function detectMobileDevice() {
94
+ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
95
+ return 'mobile'
96
+ } else {
97
+ return 'pc'
98
+ }
99
+ }
100
+ function display_deobfuscate() {
101
+ document.title = atob(BASE_SETTINGS.base64var.pageTitle);
102
+ document.getElementById('h2string1').textContent = atob(BASE_SETTINGS.base64var.h2string1);
103
+ }
104
+ function randomTrackSelector(db) {
105
+ let randomizedAlbumIndex = Math.floor(Math.random() * db.list.length);
106
+ let randomizedDiscIndex = Math.floor(Math.random() * db.list[randomizedAlbumIndex].discs.length);
107
+ let randomizedTrackIndex = Math.floor(Math.random() * db.list[randomizedAlbumIndex].discs[randomizedDiscIndex].tracks.length);
108
+ return {
109
+ albumIndex: randomizedAlbumIndex,
110
+ discIndex: randomizedDiscIndex,
111
+ trackIndex: randomizedTrackIndex
112
+ };
113
+ }
114
+ function playAudioURLBuilder(db, randomTrackSelectorOutput) {
115
+ let deviceType = detectMobileDevice();
116
+ /*
117
+ let bpsArray = new Array();
118
+ for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length; i++) {
119
+ bpsArray.push(db.list[randomTrackSelectorOutput.albumIndex].availableFmts[i].bps);
120
+ };
121
+ bpsArray.sort((a, b) => b - a);
122
+ */
123
+ let formatPath = '';
124
+ let formatExt = '';
125
+ if (BASE_SETTINGS.forceCompressedFormat) {
126
+ formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
127
+ formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
128
+ } else if (deviceType == 'pc') {
129
+ formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].path;
130
+ formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].ext;
131
+ } else if (deviceType == 'mobile') {
132
+ formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
133
+ formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
134
+ }
135
+ let trackTotal = 0;
136
+ let trackCountArray = new Array();
137
+ for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].discs.length; i++) {
138
+ trackTotal += db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length;
139
+ trackCountArray.push(db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length);
140
+ };
141
+ let selectedTrackNum = 0;
142
+ if (randomTrackSelectorOutput.discIndex == 0) {
143
+ selectedTrackNum = randomTrackSelectorOutput.trackIndex + 1;
144
+ } else {
145
+ let E7BF25ECDBAAF938 = 0;
146
+ for (let i = 0; i < randomTrackSelectorOutput.discIndex; i++) {
147
+ E7BF25ECDBAAF938 += trackCountArray[i];
148
+ }
149
+ selectedTrackNum = E7BF25ECDBAAF938 + randomTrackSelectorOutput.trackIndex + 1;
150
+ }
151
+ let selectedTrackNumStr = '';
152
+ if (trackTotal >= 100) {
153
+ selectedTrackNumStr = selectedTrackNum.toString().padStart(3, '0');
154
+ } else if (trackTotal < 100) {
155
+ selectedTrackNumStr = selectedTrackNum.toString().padStart(2, '0');
156
+ }
157
+ let filename = encodeURIComponent(db.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'].replace(/'/g, '_'));
158
+ let buildedURL = `${BASE_SETTINGS.audioRootURL}/${db.list[randomTrackSelectorOutput.albumIndex].rootPath}/${formatPath}/${selectedTrackNumStr}_${filename}.${formatExt}`;
159
+ return buildedURL;
160
+ }
161
+ function playAudio() {
162
+ document.getElementById('h1string1').removeEventListener('click', playAudio);
163
+ if (typeof audioPlayer !== 'undefined') {
164
+ audioPlayer.unload();
165
+ };
166
+ fetch(`${BASE_SETTINGS.audioRootURL}/db.json`)
167
+ .then(response => response.json())
168
+ .then(data => {
169
+ console.log('Database loaded successfully');
170
+ const FILE_DATABASE = data;
171
+ let deviceType = detectMobileDevice();
172
+ let randomTrackSelectorOutput = randomTrackSelector(FILE_DATABASE);
173
+ var audioPlayer = new Howl ({
174
+ src: [playAudioURLBuilder(FILE_DATABASE, randomTrackSelectorOutput)],
175
+ html5: true
176
+ });
177
+ window.audioPlayer = audioPlayer;
178
+ document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_loading;
179
+ document.getElementById('trackInfo_trackName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
180
+ document.getElementById('trackInfo_albumName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
181
+ document.getElementById('trackInfo_artistName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
182
+ document.getElementById('trackInfo_copyright').textContent = BASE_SETTINGS.trackInfoLabel_loading;
183
+ audioPlayer.on('load', function(){
184
+ audioPlayer.play();
185
+ document.getElementById('h1string1').addEventListener('click', playAudio);
186
+ document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_playing;
187
+ console.log(`Now playing "${FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US']}"`);
188
+ console.log(`URL: ${audioPlayer._src}`);
189
+ document.getElementById('trackInfo_trackName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'];
190
+ document.getElementById('trackInfo_albumName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumTitle;
191
+ document.getElementById('trackInfo_artistName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumArtist;
192
+ document.getElementById('trackInfo_copyright').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].copyright;
193
+ document.getElementById('cover_bg').src = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].coverExtLink;
194
+ if (document.getElementById('trackInfo_trackName').style.display == 'none' && document.getElementById('trackInfo_albumName').style.display == 'none' && document.getElementById('trackInfo_artistName').style.display == 'none' && document.getElementById('trackInfo_copyright').style.display == 'none' && document.getElementById('cover_bg').style.display == 'none') {
195
+ document.getElementById('trackInfo_trackName').style.display = 'block';
196
+ document.getElementById('trackInfo_albumName').style.display = 'block';
197
+ document.getElementById('trackInfo_artistName').style.display = 'block';
198
+ document.getElementById('trackInfo_copyright').style.display = 'block';
199
+ document.getElementById('cover_bg').style.display = 'block';
200
+ }
201
+ audioPlayer.on('end', playAudio);
202
+ });
203
+ })
204
+ .catch(error => {
205
+ console.error(error);
206
+ alert('Failed to load database file');
207
+ });
208
+ }
209
+ document.addEventListener('DOMContentLoaded', function() {
210
+ display_deobfuscate();
211
+ let deviceType = detectMobileDevice();
212
+ if (deviceType == 'pc') {
213
+ document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_pc;
214
+ } else if (deviceType == 'mobile') {
215
+ document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_mobile;
216
+ };
217
+ var audioPlayer = new Howl ({
218
+ src: ['https://archive.org/download/audio-silent-wavs-one-second-half-second-quarter-second/silent_quarter-second.mp3']
219
+ });
220
+ window.audioPlayer = audioPlayer;
221
+ });
222
+ window.onload = function () {
223
+ document.getElementById('h1string1').addEventListener('click', playAudio);
224
+ }
225
+ </script>
226
+ </body>
227
  </html>
plyr_test_0001.html ADDED
@@ -0,0 +1,216 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="preconnect" href="https://rsms.me/">
7
+ <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
11
+ <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
12
+ <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
13
+ <style>
14
+ :root { font-family: 'Inter', sans-serif; }
15
+ @supports (font-variation-settings: normal) {
16
+ :root { font-family: 'Inter var', sans-serif; }
17
+ }
18
+ body {
19
+ margin: 0;
20
+ background-color: #000000;
21
+ width: 100vw;
22
+ height: 100vh;
23
+ font-family: 'Inter', 'Noto Sans JP', sans-serif;
24
+ }
25
+ .wrapper {
26
+ height: 100vh;
27
+ display: flex;
28
+ flex-direction: column;
29
+ }
30
+ #player, .plyr {
31
+ flex-grow: 1;
32
+ height: 100%;
33
+ width: 100%;
34
+ }
35
+ footer.copyrightDisp {
36
+ position: fixed;
37
+ left: 0;
38
+ bottom: 0;
39
+ padding: 0;
40
+ margin: 0 0 10px 10px;
41
+ color: #ffffff80;
42
+ z-index: 2;
43
+ user-select: none;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body>
48
+ <div class="wrapper">
49
+ <video id="player" playsinline controls>
50
+ </video>
51
+ </div>
52
+ <footer class="copyrightDisp">
53
+ Resources are created for research purposes.<br>
54
+ (C) 2023 Tappei Nagatsuki, KADOKAWA, daydreamer-json
55
+ </footer>
56
+ <script>
57
+ const plyrOptions = {
58
+ enabled: true,
59
+ debug: false,
60
+ controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
61
+ settings: ['captions', 'quality', 'speed', 'loop'],
62
+ blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
63
+ autoplay: false,
64
+ autopause: true,
65
+ playsinline: true,
66
+ volume: 1,
67
+ muted: false,
68
+ clickToPlay: true,
69
+ disableContextMenu: true,
70
+ hideControls: true,
71
+ resetOnEnd: false,
72
+ keyboard: { focused: true, global: false },
73
+ tooltips: { controls: true, seek: true },
74
+ displayDuration: true,
75
+ invertTime: true,
76
+ toggleInvert: true,
77
+ captions: { active: false, language: 'auto', update: false },
78
+ fullscreen: { enabled: true, fallback: true, iosNative: false, container: null },
79
+ storage: { enabled: true, key: 'plyr' },
80
+ speed: { selected: 1, options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4] },
81
+ quality: { default: 1080, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240, 144] },
82
+ loop: { active: false },
83
+ previewThumbnails: { enabled: false, src: '' },
84
+ mediaMetadata: { title: '', artist: '', album: '', artwork: [] },
85
+ title: '',
86
+ i18n: {
87
+ "restart": "再起動",
88
+ "rewind": "{seektime}秒戻る",
89
+ "play": "再生",
90
+ "pause": "一時停止",
91
+ "fastForward": "{seektime}秒進む",
92
+ "seek": "シーク",
93
+ "seekLabel": "{currentTime} / {duration}",
94
+ "played": "再生中",
95
+ "buffered": "読み込み中",
96
+ "currentTime": "再生位置",
97
+ "duration": "長さ",
98
+ "volume": "音量",
99
+ "mute": "ミュート",
100
+ "unmute": "ミュート解除",
101
+ "enableCaptions": "字幕オン",
102
+ "disableCaptions": "字幕オフ",
103
+ "download": "ダウンロード",
104
+ "enterFullscreen": "全画面表示",
105
+ "exitFullscreen": "全画面表示を終了",
106
+ "frameTitle": "{title}",
107
+ "captions": "字幕",
108
+ "settings": "設定",
109
+ "pip": "ピクチャインピクチャ",
110
+ "menuBack": "前のメニューに戻る",
111
+ "speed": "速度",
112
+ "normal": "標準",
113
+ "quality": "画質",
114
+ "loop": "ループ",
115
+ "start": "開始",
116
+ "end": "終了",
117
+ "all": "すべて",
118
+ "reset": "リセット",
119
+ "disabled": "無効",
120
+ "enabled": "有効",
121
+ "advertisement": "広告",
122
+ "qualityBadge": {
123
+ "2160": "4K",
124
+ "1440": "HD",
125
+ "1080": "HD",
126
+ "720": "HD",
127
+ "576": "SD",
128
+ "480": "SD"
129
+ }
130
+ }
131
+ };
132
+ const player = new Plyr('#player', plyrOptions);
133
+ player.source = {
134
+ type: 'video',
135
+ title: 're_zero_s2_sp_nc_op',
136
+ sources: [
137
+ {
138
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_144p_h264.mp4',
139
+ type: 'video/mp4;codecs="avc1.64000C,mp4a.40.29"',
140
+ size: 144,
141
+ },
142
+ {
143
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_144p_hevc.mp4',
144
+ type: 'video/mp4;codecs="hvc1.1.2.L60.90,mp4a.40.29"',
145
+ size: 144,
146
+ },
147
+ {
148
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_240p_h264.mp4',
149
+ type: 'video/mp4;codecs="avc1.640015,mp4a.40.5"',
150
+ size: 144,
151
+ },
152
+ {
153
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_240p_hevc.mp4',
154
+ type: 'video/mp4;codecs="hvc1.1.2.L60.90,mp4a.40.5"',
155
+ size: 240,
156
+ },
157
+ {
158
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_360p_h264.mp4',
159
+ type: 'video/mp4;codecs="avc1.64001E,mp4a.40.2"',
160
+ size: 360,
161
+ },
162
+ {
163
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_360p_hevc.mp4',
164
+ type: 'video/mp4;codecs="hvc1.1.2.L63.90,mp4a.40.2"',
165
+ size: 360,
166
+ },
167
+ {
168
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_480p_h264.mp4',
169
+ type: 'video/mp4;codecs="avc1.64001E,mp4a.40.2"',
170
+ size: 480,
171
+ },
172
+ {
173
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_480p_hevc.mp4',
174
+ type: 'video/mp4;codecs="hvc1.1.2.L90.90,mp4a.40.2"',
175
+ size: 480,
176
+ },
177
+ {
178
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_720p_h264.mp4',
179
+ type: 'video/mp4;codecs="avc1.64001F,mp4a.40.2"',
180
+ size: 720,
181
+ },
182
+ {
183
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_720p_hevc.mp4',
184
+ type: 'video/mp4;codecs="hvc1.1.2.L93.90,mp4a.40.2"',
185
+ size: 720,
186
+ },
187
+ {
188
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_1080p_h264.mp4',
189
+ type: 'video/mp4;codecs="avc1.640028,mp4a.40.2"',
190
+ size: 1080,
191
+ },
192
+ {
193
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_1080p_hevc.mp4',
194
+ type: 'video/mp4;codecs="hvc1.1.2.L120.90,mp4a.40.2"',
195
+ size: 1080,
196
+ },
197
+ {
198
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_2160p_h264.mp4',
199
+ type: 'video/mp4;codecs="avc1.640033,mp4a.40.2"',
200
+ size: 2160,
201
+ },
202
+ {
203
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_2160p_hevc.mp4',
204
+ type: 'video/mp4;codecs="hvc1.1.2.L150.90,mp4a.40.2"',
205
+ size: 2160,
206
+ },
207
+ {
208
+ src: 'https://github.com/daydreamer-json/release_storage_test/releases/download/re_zero_s2_sp_nc_op_mp4_test/vid_2160p_hevc_main10.mp4',
209
+ type: 'video/mp4;codecs="hvc1.2.4.L150.90,mp4a.40.2"',
210
+ size: 2160,
211
+ },
212
+ ]
213
+ };
214
+ </script>
215
+ </body>
216
+ </html>
stay_audio_format.html CHANGED
@@ -1,405 +1,405 @@
1
- <html>
2
- <head>
3
- <meta charset="utf-8" />
4
- <meta name="viewport" content="width=device-width, initial-scale=1.00" />
5
- <meta name="robots" content="noindex,nofollow,noarchive" />
6
- <script
7
- src="https://code.jquery.com/jquery-3.6.1.min.js"
8
- integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
9
- crossorigin="anonymous"
10
- ></script>
11
- <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
12
- <link
13
- rel="stylesheet"
14
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
15
- />
16
- <link
17
- href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css"
18
- rel="stylesheet"
19
- type="text/css"
20
- media="all"
21
- />
22
- <style>
23
- html,
24
- body {
25
- color: #fff;
26
- background: #000;
27
- margin: 0;
28
- line-height: 1;
29
- width: 100vw;
30
- height: 100vh;
31
- font-family: "A-OTF UD Shin Go Pro", system-ui;
32
- }
33
- textarea,
34
- button {
35
- color: #fff;
36
- background: #000;
37
- width: 100vw;
38
- font-family: system-ui;
39
- resize: none;
40
- }
41
- .inputbox {
42
- color: #fff;
43
- background: #000;
44
- width: 20vw;
45
- font-family: system-ui;
46
- }
47
- </style>
48
- </head>
49
- <body>
50
- <button onclick="playSync()" style="font-size: 24px">同期再生</button>
51
- <button onclick="stopAll()" style="display: none">停止</button>
52
- <br />
53
- <input
54
- class="inputbox"
55
- id="liveIDBox"
56
- type="number"
57
- inputmode="numeric"
58
- required
59
- min="1001"
60
- max="9999"
61
- value="1036"
62
- />
63
- <select id="codecSelectBox1" class="selectBox1" required>
64
- </select>
65
- <select id="rcSelectBox1" class="selectBox1" required>
66
- </select>
67
- <select id="bitrateSelectBox1" class="selectBox1" required>
68
- </select>
69
- <br />
70
- <select id="codecSelectBox2" class="selectBox2" required>
71
- </select>
72
- <select id="rcSelectBox2" class="selectBox2" required>
73
- </select>
74
- <select id="bitrateSelectBox2" class="selectBox2" required>
75
- </select>
76
- <br />
77
- <textarea id="textbox" style="height: 400px" readonly>
78
- Logger出力はここに表示されます</textarea
79
- >
80
- <br />
81
- <textarea id="urllistbox" style="height: 8em" readonly></textarea>
82
- <script>
83
- const FORMAT_LIST_JSON = {
84
- "codecList": [
85
- {"id": "flac", "label": "FLAC", "ext": "flac"},
86
- {"id": "mp3", "label": "MP3", "ext": "mp3"},
87
- {"id": "aac_lc", "label": "AAC-LC", "ext": "m4a"},
88
- {"id": "aac_he_v1", "label": "HE-AAC v1", "ext": "m4a"},
89
- {"id": "aac_he_v2", "label": "HE-AAC v2", "ext": "m4a"},
90
- {"id": "ogg", "label": "Vorbis", "ext": "ogg"},
91
- {"id": "opus", "label": "Opus", "ext": "opus"}
92
- ],
93
- "flac": {
94
- "rcList": [
95
- {"id": "vbr", "label": "VBR", "type": "k"}
96
- ],
97
- "vbr": [1411]
98
- },
99
- "mp3": {
100
- "rcList": [
101
- {"id": "vbr", "label": "VBR", "type": "q"},
102
- {"id": "abr", "label": "ABR", "type": "k"},
103
- {"id": "cbr", "label": "CBR", "type": "k"}
104
- ],
105
- "vbr": [
106
- 9, 8, 7, 6, 5, 4, 3, 2, 1, 0
107
- ],
108
- "abr": [
109
- 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256, 320
110
- ],
111
- "cbr": [
112
- 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256, 320
113
- ]
114
- },
115
- "aac_lc": {
116
- "rcList": [
117
- {"id": "tvbr", "label": "VBR", "type": "q"},
118
- {"id": "cvbr", "label": "CVBR", "type": "k"},
119
- {"id": "abr", "label": "ABR", "type": "k"},
120
- {"id": "cbr", "label": "CBR", "type": "k"},
121
- ],
122
- "tvbr": [
123
- 0, 9, 18, 27, 36, 45, 54, 64, 73, 82, 91, 100, 109, 118, 127
124
- ],
125
- "cvbr": [
126
- 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
127
- ],
128
- "abr": [
129
- 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
130
- ],
131
- "cbr": [
132
- 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
133
- ]
134
- },
135
- "aac_he_v1": {
136
- "rcList": [
137
- {"id": "cvbr", "label": "CVBR", "type": "k"},
138
- {"id": "abr", "label": "ABR", "type": "k"},
139
- {"id": "cbr", "label": "CBR", "type": "k"}
140
- ],
141
- "cvbr": [
142
- 32, 40, 48, 56, 64, 80
143
- ],
144
- "abr": [
145
- 32, 40, 48, 56, 64, 80
146
- ],
147
- "cbr": [
148
- 32, 40, 48, 56, 64, 80
149
- ]
150
- },
151
- "aac_he_v2": {
152
- "rcList": [
153
- {"id": "vbr", "label": "VBR", "type": "q"},
154
- {"id": "cbr", "label": "CBR", "type": "k"}
155
- ],
156
- "vbr": [
157
- 1, 2, 3, 4, 5
158
- ],
159
- "cbr": [
160
- 8, 16, 24, 32, 40, 48, 56, 64, 80
161
- ]
162
- },
163
- "ogg": {
164
- "rcList": [
165
- {"id": "vbr", "label": "VBR", "type": "q"},
166
- {"id": "abr", "label": "ABR", "type": "k"},
167
- {"id": "cbr", "label": "CBR", "type": "k"}
168
- ],
169
- "vbr": [
170
- -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
171
- ],
172
- "abr": [
173
- 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
174
- ],
175
- "cbr": [
176
- 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
177
- ]
178
- },
179
- "opus": {
180
- "rcList": [
181
- {"id": "vbr", "label": "VBR", "type": "k"},
182
- {"id": "cvbr", "label": "CVBR", "type": "k"},
183
- {"id": "cbr", "label": "CBR", "type": "k"}
184
- ],
185
- "vbr": [
186
- 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
187
- ],
188
- "cvbr": [
189
- 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
190
- ],
191
- "cbr": [
192
- 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
193
- ]
194
- }
195
- }
196
- const DEFAULT_SELECTED = [
197
- {
198
- "codec": "flac",
199
- "rc": "vbr",
200
- "bitrate": 1411,
201
- },
202
- {
203
- "codec": "mp3",
204
- "rc": "abr",
205
- "bitrate": 128,
206
- }
207
- ];
208
-
209
- function logger(text) {
210
- document.getElementById("textbox").value += "\r\n" + text; // 新しい行に文字列を追加する
211
- }
212
- // 以下のスクリプトはBing(ChatGPT)が生成したものに追記したものです。
213
- // プロンプト:
214
- // ある曲のカラオケバージョンの音源と、3人分のボーカルの音源があります。つまり、4つの音声ファイルがあります。これらのファイルを完全に同期して同時再生するコードを、Howler.jsを使用した上でHTMLとJavaScriptで書いてください。
215
-
216
- var howls = [];
217
- // 同期再生用の関数を定義
218
- function playSync() {
219
- stopAll();
220
- var liveID = document.getElementById("liveIDBox").value;
221
- var charaID = [
222
- document.getElementById("charaIDBox1").value,
223
- document.getElementById("charaIDBox2").value,
224
- document.getElementById("charaIDBox3").value,
225
- ];
226
- var okeVol = document.getElementById("okeVolBox").value;
227
- var charaVol1 = document.getElementById("charaVolBox1").value;
228
- var charaVol2 = document.getElementById("charaVolBox2").value;
229
- var charaPan = document.getElementById("charaPanBox").value;
230
- // 音声ファイルのパスを配列に格納
231
- var audioFiles = [
232
- `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_oke_02/snd_bgm_live_${liveID}_oke_02_1.m4a`,
233
- `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_chara_${charaID[0]}_01/snd_bgm_live_${liveID}_chara_${charaID[0]}_01_1.m4a`,
234
- `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_chara_${charaID[1]}_01/snd_bgm_live_${liveID}_chara_${charaID[1]}_01_1.m4a`,
235
- `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_chara_${charaID[2]}_01/snd_bgm_live_${liveID}_chara_${charaID[2]}_01_1.m4a`,
236
- ];
237
- logger("playSync関数が呼び出されました");
238
- logger(`liveIDは${liveID}です`);
239
- // logger(`liveIDのtext_dataは${master_db_text_data_search(16, liveID).text}です`);
240
- for (let i = 0; i < charaID.length; i++) {
241
- logger(`charaIDは${charaID[i]}です: id=${i + 1}`);
242
- }
243
- document.getElementById("urllistbox").value = "";
244
- remote_file_head_test(audioFiles).then((statusList) => {
245
- if (statusList.every((status) => status === 200)) {
246
- for (let i = 0; i < statusList.length; i++) {
247
- logger(`リモートファイルへHEADしました: id=${i}, status=${statusList[i]}`);
248
- };
249
- logger(`リモートファイルは正常です`);
250
- // 配列の要素数だけ繰り返す
251
- for (let i = 0; i < audioFiles.length; i++) {
252
- // Howlオブジェクトを作成して配列に追加
253
- howls[i] = new Howl({
254
- src: audioFiles[i], // 音声ファイルのパス
255
- preload: true, // 読み込み完了まで待つかどうか
256
- autoplay: false, // 自動再生するかどうか
257
- loop: true, // ループ再生するかどうか
258
- });
259
- logger(`Howlオブジェクトを作成しました: id=${i}`);
260
- }
261
- // 全ての音声ファイルが読み込まれたら実行する関数を設定
262
- var loadedCount = 0; // 読み込まれた音声ファイルの数
263
- var onLoad = function () {
264
- loadedCount++; // 読み込まれた数を増やす
265
- logger(
266
- `音声ファイルがプリロードされました: id=${loadedCount - 1}`
267
- );
268
- document.getElementById("urllistbox").value +=
269
- audioFiles[loadedCount - 1].match(/([^\/?#]+)(?=[^\/]*$)/)[0] +
270
- "\r\n";
271
- if (loadedCount == audioFiles.length) {
272
- // 全て読み込まれたら
273
- howls[0].volume(okeVol);
274
- logger(
275
- `Howlオブジェクトのvolumeを変更しました: id=0, value=${okeVol}`
276
- );
277
- for (let j = 2; j <= 3; j++) {
278
- howls[j].volume(charaVol2); // ボーカルの音源3つ（インデックス1から3）の音量を設定（追加したコード）
279
- logger(
280
- `Howlオブジェクトのvolumeを変更しました: id=${j}, value=${charaVol2}`
281
- );
282
- }
283
- howls[1].volume(charaVol1);
284
- logger(
285
- `Howlオブジェクトのvolumeを変更しました: id=1, value=${charaVol1}`
286
- );
287
- howls[2].stereo(0 - charaPan); // 特定のボーカルだけ左チャンネルに寄せる（追加したコード）
288
- logger(
289
- `Howlオブジェクトのstereoを変更しました: id=2, value=${
290
- 0 - charaPan
291
- }`
292
- );
293
- howls[3].stereo(charaPan); // 特定のボーカルだけ右チャンネルに寄せる（追加したコード）
294
- logger(
295
- `Howlオブジェクトのstereoを変更しました: id=3, value=${charaPan}`
296
- );
297
- for (let j = 0; j < howls.length; j++) {
298
- // 配列の要素数だけ繰り返す
299
- howls[j].play(); // 再生する（Howlオブジェクトは自動的に同期される）
300
- logger(`Howlオブジェクトを再生しました: id=${j}`);
301
- }
302
- }
303
- };
304
- for (let k = 0; k < howls.length; k++) {
305
- // 配列の要素数だけ繰り返す
306
- howls[k].once("load", onLoad); // 読み込み完了時にonLoad関数を実行するように設定
307
- }
308
- } else {
309
- for (let i = 0; i < statusList.length; i++) {
310
- logger(`リモートファイルへHEADしました: id=${i}, status=${statusList[i]}`);
311
- }
312
- logger(`リモートファイルの一部に問題があります`);
313
- }
314
- });
315
- }
316
- // 再生停止用の関数を定義（追加したコード）
317
- function stopAll() {
318
- for (var n = 0; n < howls.length; n++) {
319
- // 配列の要素数だけ繰り返す
320
- howls[n].stop(); // 停止する
321
- howls[n].unload();
322
- }
323
- document.getElementById("textbox").value =
324
- "Logger出力はここに表示されます";
325
- logger(`stopAll関数が呼び出されました`);
326
- }
327
- function master_db_text_data_search(categoryNumber, idNumber) {
328
- fetch(
329
- "https://cdn.jsdelivr.net/gh/daydreamer-json/umm_master_db@main/json/text_data.json"
330
- )
331
- .then((response) => response.json())
332
- .then((data) => {
333
- var master_db_text_data = data;
334
- logger(`マスターデータベースを読み込みました`);
335
- let categoryResult = master_db_text_data.filter(function (obj) {
336
- return obj.category === categoryNumber;
337
- });
338
- let integratedResult = categoryResult.filter(function (obj) {
339
- return obj.id === idNumber;
340
- });
341
- return integratedResult[0];
342
- })
343
- .catch((error) => {
344
- console.error(error);
345
- return null;
346
- });
347
- }
348
- async function remote_file_head_test(audioFilesList) {
349
- const promises = audioFilesList.map((url) =>
350
- fetch(url, { method: "HEAD" })
351
- );
352
- const responses = await Promise.all(promises);
353
- return responses.map((response) => response.status);
354
- }
355
- document.addEventListener('DOMContentLoaded',function() {
356
- for (let i = 0; i < FORMAT_LIST_JSON.length; i++) {
357
- var temp_codecSelectBox1 = document.getElementById('codecSelectBox1');
358
- var temp_codecSelectBox1_inOption = document.createElement('option');
359
- temp_codecSelectBox1_inOption.value = FORMAT_LIST_JSON.codecList[i].id;
360
- temp_codecSelectBox1_inOption.text = FORMAT_LIST_JSON.codecList[i].label;
361
- if (FORMAT_LIST_JSON.codecList[i].id === DEFAULT_SELECTED[0].codec) {
362
- temp_codecSelectBox1_inOption.selected = true;
363
- }
364
- temp_codecSelectBox1.appendChild(temp_codecSelectBox1_inOption);
365
- }
366
- for (let i = 0; i < FORMAT_LIST_JSON.length; i++) {
367
- var temp_codecSelectBox2 = document.getElementById('codecSelectBox2');
368
- var temp_codecSelectBox2_inOption = document.createElement('option');
369
- temp_codecSelectBox2_inOption.value = FORMAT_LIST_JSON.codecList[i].id;
370
- temp_codecSelectBox2_inOption.text = FORMAT_LIST_JSON.codecList[i].label;
371
- if (FORMAT_LIST_JSON.codecList[i].id === DEFAULT_SELECTED[1].codec) {
372
- temp_codecSelectBox2_inOption.selected = true;
373
- }
374
- temp_codecSelectBox2.appendChild(temp_codecSelectBox2_inOption);
375
- }
376
- });
377
- function refreshRcSelectBox() {
378
- var temp_codecSelectBox1_selected_index = document.getElementById('codecSelectBox1').selectedIndex;
379
- var temp_codecSelectBox2_selected_index = document.getElementById('codecSelectBox2').selectedIndex;
380
- var temp_codecSelectBox1_selected_option = document.getElementById('codecSelectBox1').options[temp_codecSelectBox1_selected_index];
381
- var temp_codecSelectBox2_selected_option = document.getElementById('codecSelectBox2').options[temp_codecSelectBox2_selected_index];
382
- for (let i = 0; i < FORMAT_LIST_JSON[temp_codecSelectBox1_selected_option.value].rcList.length; i++) {
383
- var temp_rcSelectBox1 = document.getElementById('rcSelectBox1');
384
- var temp_rcSelectBox1_inOption = document.createElement('option');
385
- temp_rcSelectBox1_inOption.value = FORMAT_LIST_JSON[temp_codecSelectBox1_selected_option.value].rcList[i].id;
386
- temp_rcSelectBox1_inOption.text = FORMAT_LIST_JSON[temp_codecSelectBox1_selected_option.value].rcList[i].label;
387
- if (FORMAT_LIST_JSON[temp_codecSelectBox1_selected_option.value].rcList[i].id === DEFAULT_SELECTED[0].rc) {
388
- temp_rcSelectBox1_inOption.selected = true;
389
- }
390
- temp_rcSelectBox1.appendChild(temp_rcSelectBox1_inOption);
391
- }
392
- for (let i = 0; i < FORMAT_LIST_JSON[temp_codecSelectBox2_selected_option.value].rcList.length; i++) {
393
- var temp_rcSelectBox2 = document.getElementById('rcSelectBox2');
394
- var temp_rcSelectBox2_inOption = document.createElement('option');
395
- temp_rcSelectBox2_inOption.value = FORMAT_LIST_JSON[temp_codecSelectBox2_selected_option.value].rcList[i].id;
396
- temp_rcSelectBox2_inOption.text = FORMAT_LIST_JSON[temp_codecSelectBox2_selected_option.value].rcList[i].label;
397
- if (FORMAT_LIST_JSON[temp_codecSelectBox2_selected_option.value].rcList[i].id === DEFAULT_SELECTED[1].rc) {
398
- temp_rcSelectBox2_inOption.selected = true;
399
- }
400
- temp_rcSelectBox2.appendChild(temp_rcSelectBox2_inOption);
401
- }
402
- }
403
- </script>
404
- </body>
405
- </html>
 
1
+ <html>
2
+ <head>
3
+ <meta charset="utf-8" />
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.00" />
5
+ <meta name="robots" content="noindex,nofollow,noarchive" />
6
+ <script
7
+ src="https://code.jquery.com/jquery-3.6.1.min.js"
8
+ integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
9
+ crossorigin="anonymous"
10
+ ></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
12
+ <link
13
+ rel="stylesheet"
14
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
15
+ />
16
+ <link
17
+ href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css"
18
+ rel="stylesheet"
19
+ type="text/css"
20
+ media="all"
21
+ />
22
+ <style>
23
+ html,
24
+ body {
25
+ color: #fff;
26
+ background: #000;
27
+ margin: 0;
28
+ line-height: 1;
29
+ width: 100vw;
30
+ height: 100vh;
31
+ font-family: "A-OTF UD Shin Go Pro", system-ui;
32
+ }
33
+ textarea,
34
+ button {
35
+ color: #fff;
36
+ background: #000;
37
+ width: 100vw;
38
+ font-family: system-ui;
39
+ resize: none;
40
+ }
41
+ .inputbox {
42
+ color: #fff;
43
+ background: #000;
44
+ width: 20vw;
45
+ font-family: system-ui;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body>
50
+ <button onclick="playSync()" style="font-size: 24px">同期再生</button>
51
+ <button onclick="stopAll()" style="display: none">停止</button>
52
+ <br />
53
+ <input
54
+ class="inputbox"
55
+ id="liveIDBox"
56
+ type="number"
57
+ inputmode="numeric"
58
+ required
59
+ min="1001"
60
+ max="9999"
61
+ value="1036"
62
+ />
63
+ <select id="codecSelectBox1" class="selectBox1" required>
64
+ </select>
65
+ <select id="rcSelectBox1" class="selectBox1" required>
66
+ </select>
67
+ <select id="bitrateSelectBox1" class="selectBox1" required>
68
+ </select>
69
+ <br />
70
+ <select id="codecSelectBox2" class="selectBox2" required>
71
+ </select>
72
+ <select id="rcSelectBox2" class="selectBox2" required>
73
+ </select>
74
+ <select id="bitrateSelectBox2" class="selectBox2" required>
75
+ </select>
76
+ <br />
77
+ <textarea id="textbox" style="height: 400px" readonly>
78
+ Logger出力はここに表示されます</textarea
79
+ >
80
+ <br />
81
+ <textarea id="urllistbox" style="height: 8em" readonly></textarea>
82
+ <script>
83
+ const FORMAT_LIST_JSON = {
84
+ "codecList": [
85
+ {"id": "flac", "label": "FLAC", "ext": "flac"},
86
+ {"id": "mp3", "label": "MP3", "ext": "mp3"},
87
+ {"id": "aac_lc", "label": "AAC-LC", "ext": "m4a"},
88
+ {"id": "aac_he_v1", "label": "HE-AAC v1", "ext": "m4a"},
89
+ {"id": "aac_he_v2", "label": "HE-AAC v2", "ext": "m4a"},
90
+ {"id": "ogg", "label": "Vorbis", "ext": "ogg"},
91
+ {"id": "opus", "label": "Opus", "ext": "opus"}
92
+ ],
93
+ "flac": {
94
+ "rcList": [
95
+ {"id": "vbr", "label": "VBR", "type": "k"}
96
+ ],
97
+ "vbr": [1411]
98
+ },
99
+ "mp3": {
100
+ "rcList": [
101
+ {"id": "vbr", "label": "VBR", "type": "q"},
102
+ {"id": "abr", "label": "ABR", "type": "k"},
103
+ {"id": "cbr", "label": "CBR", "type": "k"}
104
+ ],
105
+ "vbr": [
106
+ 9, 8, 7, 6, 5, 4, 3, 2, 1, 0
107
+ ],
108
+ "abr": [
109
+ 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256, 320
110
+ ],
111
+ "cbr": [
112
+ 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256, 320
113
+ ]
114
+ },
115
+ "aac_lc": {
116
+ "rcList": [
117
+ {"id": "tvbr", "label": "VBR", "type": "q"},
118
+ {"id": "cvbr", "label": "CVBR", "type": "k"},
119
+ {"id": "abr", "label": "ABR", "type": "k"},
120
+ {"id": "cbr", "label": "CBR", "type": "k"},
121
+ ],
122
+ "tvbr": [
123
+ 0, 9, 18, 27, 36, 45, 54, 64, 73, 82, 91, 100, 109, 118, 127
124
+ ],
125
+ "cvbr": [
126
+ 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
127
+ ],
128
+ "abr": [
129
+ 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
130
+ ],
131
+ "cbr": [
132
+ 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
133
+ ]
134
+ },
135
+ "aac_he_v1": {
136
+ "rcList": [
137
+ {"id": "cvbr", "label": "CVBR", "type": "k"},
138
+ {"id": "abr", "label": "ABR", "type": "k"},
139
+ {"id": "cbr", "label": "CBR", "type": "k"}
140
+ ],
141
+ "cvbr": [
142
+ 32, 40, 48, 56, 64, 80
143
+ ],
144
+ "abr": [
145
+ 32, 40, 48, 56, 64, 80
146
+ ],
147
+ "cbr": [
148
+ 32, 40, 48, 56, 64, 80
149
+ ]
150
+ },
151
+ "aac_he_v2": {
152
+ "rcList": [
153
+ {"id": "vbr", "label": "VBR", "type": "q"},
154
+ {"id": "cbr", "label": "CBR", "type": "k"}
155
+ ],
156
+ "vbr": [
157
+ 1, 2, 3, 4, 5
158
+ ],
159
+ "cbr": [
160
+ 8, 16, 24, 32, 40, 48, 56, 64, 80
161
+ ]
162
+ },
163
+ "ogg": {
164
+ "rcList": [
165
+ {"id": "vbr", "label": "VBR", "type": "q"},
166
+ {"id": "abr", "label": "ABR", "type": "k"},
167
+ {"id": "cbr", "label": "CBR", "type": "k"}
168
+ ],
169
+ "vbr": [
170
+ -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
171
+ ],
172
+ "abr": [
173
+ 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
174
+ ],
175
+ "cbr": [
176
+ 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
177
+ ]
178
+ },
179
+ "opus": {
180
+ "rcList": [
181
+ {"id": "vbr", "label": "VBR", "type": "k"},
182
+ {"id": "cvbr", "label": "CVBR", "type": "k"},
183
+ {"id": "cbr", "label": "CBR", "type": "k"}
184
+ ],
185
+ "vbr": [
186
+ 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
187
+ ],
188
+ "cvbr": [
189
+ 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
190
+ ],
191
+ "cbr": [
192
+ 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
193
+ ]
194
+ }
195
+ }
196
+ const DEFAULT_SELECTED = [
197
+ {
198
+ "codec": "flac",
199
+ "rc": "vbr",
200
+ "bitrate": 1411,
201
+ },
202
+ {
203
+ "codec": "mp3",
204
+ "rc": "abr",
205
+ "bitrate": 128,
206
+ }
207
+ ];
208
+
209
+ function logger(text) {
210
+ document.getElementById("textbox").value += "\r\n" + text; // 新しい行に文字列を追加する
211
+ }
212
+ // 以下のスクリプトはBing(ChatGPT)が生成したものに追記したものです。
213
+ // プロンプト:
214
+ // ある曲のカラオケバージョンの音源と、3人分のボーカルの音源があります。つまり、4つの音声ファイルがあります。これらのファイルを完全に同期して同時再生するコードを、Howler.jsを使用した上でHTMLとJavaScriptで書いてください。
215
+
216
+ var howls = [];
217
+ // 同期再生用の関数を定義
218
+ function playSync() {
219
+ stopAll();
220
+ var liveID = document.getElementById("liveIDBox").value;
221
+ var charaID = [
222
+ document.getElementById("charaIDBox1").value,
223
+ document.getElementById("charaIDBox2").value,
224
+ document.getElementById("charaIDBox3").value,
225
+ ];
226
+ var okeVol = document.getElementById("okeVolBox").value;
227
+ var charaVol1 = document.getElementById("charaVolBox1").value;
228
+ var charaVol2 = document.getElementById("charaVolBox2").value;
229
+ var charaPan = document.getElementById("charaPanBox").value;
230
+ // 音声ファイルのパスを配列に格納
231
+ var audioFiles = [
232
+ `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_oke_02/snd_bgm_live_${liveID}_oke_02_1.m4a`,
233
+ `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_chara_${charaID[0]}_01/snd_bgm_live_${liveID}_chara_${charaID[0]}_01_1.m4a`,
234
+ `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_chara_${charaID[1]}_01/snd_bgm_live_${liveID}_chara_${charaID[1]}_01_1.m4a`,
235
+ `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_chara_${charaID[2]}_01/snd_bgm_live_${liveID}_chara_${charaID[2]}_01_1.m4a`,
236
+ ];
237
+ logger("playSync関数が呼び出されました");
238
+ logger(`liveIDは${liveID}です`);
239
+ // logger(`liveIDのtext_dataは${master_db_text_data_search(16, liveID).text}です`);
240
+ for (let i = 0; i < charaID.length; i++) {
241
+ logger(`charaIDは${charaID[i]}です: id=${i + 1}`);
242
+ }
243
+ document.getElementById("urllistbox").value = "";
244
+ remote_file_head_test(audioFiles).then((statusList) => {
245
+ if (statusList.every((status) => status === 200)) {
246
+ for (let i = 0; i < statusList.length; i++) {
247
+ logger(`リモートファイルへHEADしました: id=${i}, status=${statusList[i]}`);
248
+ };
249
+ logger(`リモートファイルは正常です`);
250
+ // 配列の要素数だけ繰り返す
251
+ for (let i = 0; i < audioFiles.length; i++) {
252
+ // Howlオブジェクトを作成して配列に追加
253
+ howls[i] = new Howl({
254
+ src: audioFiles[i], // 音声ファイルのパス
255
+ preload: true, // 読み込み完了まで待つかどうか
256
+ autoplay: false, // 自動再生するかどうか
257
+ loop: true, // ループ再生するかどうか
258
+ });
259
+ logger(`Howlオブジェクトを作成しました: id=${i}`);
260
+ }
261
+ // 全ての音声ファイルが読み込まれたら実行する関数を設定
262
+ var loadedCount = 0; // 読み込まれた音声ファイルの数
263
+ var onLoad = function () {
264
+ loadedCount++; // 読み込まれた数を増やす
265
+ logger(
266
+ `音声ファイルがプリロードされました: id=${loadedCount - 1}`
267
+ );
268
+ document.getElementById("urllistbox").value +=
269
+ audioFiles[loadedCount - 1].match(/([^\/?#]+)(?=[^\/]*$)/)[0] +
270
+ "\r\n";
271
+ if (loadedCount == audioFiles.length) {
272
+ // 全て読み込まれたら
273
+ howls[0].volume(okeVol);
274
+ logger(
275
+ `Howlオブジェクトのvolumeを変更しました: id=0, value=${okeVol}`
276
+ );
277
+ for (let j = 2; j <= 3; j++) {
278
+ howls[j].volume(charaVol2); // ボーカルの音源3つ（インデックス1から3）の音量を設定（追加したコード）
279
+ logger(
280
+ `Howlオブジェクトのvolumeを変更しました: id=${j}, value=${charaVol2}`
281
+ );
282
+ }
283
+ howls[1].volume(charaVol1);
284
+ logger(
285
+ `Howlオブジェクトのvolumeを変更しました: id=1, value=${charaVol1}`
286
+ );
287
+ howls[2].stereo(0 - charaPan); // 特定のボーカルだけ左チャンネルに寄せる（追加したコード）
288
+ logger(
289
+ `Howlオブジェクトのstereoを変更しました: id=2, value=${
290
+ 0 - charaPan
291
+ }`
292
+ );
293
+ howls[3].stereo(charaPan); // 特定のボーカルだけ右チャンネルに寄せる（追加したコード）
294
+ logger(
295
+ `Howlオブジェクトのstereoを変更しました: id=3, value=${charaPan}`
296
+ );
297
+ for (let j = 0; j < howls.length; j++) {
298
+ // 配列���要素数だけ繰り返す
299
+ howls[j].play(); // 再生する（Howlオブジェクトは自動的に同期される）
300
+ logger(`Howlオブジェクトを再生しました: id=${j}`);
301
+ }
302
+ }
303
+ };
304
+ for (let k = 0; k < howls.length; k++) {
305
+ // 配列の要素数だけ繰り返す
306
+ howls[k].once("load", onLoad); // 読み込み完了時にonLoad関数を実行するように設定
307
+ }
308
+ } else {
309
+ for (let i = 0; i < statusList.length; i++) {
310
+ logger(`リモートファイルへHEADしました: id=${i}, status=${statusList[i]}`);
311
+ }
312
+ logger(`リモートファイルの一部に問題があります`);
313
+ }
314
+ });
315
+ }
316
+ // 再生停止用の関数を定義（追加したコード）
317
+ function stopAll() {
318
+ for (var n = 0; n < howls.length; n++) {
319
+ // 配列の要素数だけ繰り返す
320
+ howls[n].stop(); // 停止する
321
+ howls[n].unload();
322
+ }
323
+ document.getElementById("textbox").value =
324
+ "Logger出力はここに表示されます";
325
+ logger(`stopAll関数が呼び出されました`);
326
+ }
327
+ function master_db_text_data_search(categoryNumber, idNumber) {
328
+ fetch(
329
+ "https://cdn.jsdelivr.net/gh/daydreamer-json/umm_master_db@main/json/text_data.json"
330
+ )
331
+ .then((response) => response.json())
332
+ .then((data) => {
333
+ var master_db_text_data = data;
334
+ logger(`マスターデータベースを読み込みました`);
335
+ let categoryResult = master_db_text_data.filter(function (obj) {
336
+ return obj.category === categoryNumber;
337
+ });
338
+ let integratedResult = categoryResult.filter(function (obj) {
339
+ return obj.id === idNumber;
340
+ });
341
+ return integratedResult[0];
342
+ })
343
+ .catch((error) => {
344
+ console.error(error);
345
+ return null;
346
+ });
347
+ }
348
+ async function remote_file_head_test(audioFilesList) {
349
+ const promises = audioFilesList.map((url) =>
350
+ fetch(url, { method: "HEAD" })
351
+ );
352
+ const responses = await Promise.all(promises);
353
+ return responses.map((response) => response.status);
354
+ }
355
+ document.addEventListener('DOMContentLoaded',function() {
356
+ for (let i = 0; i < FORMAT_LIST_JSON.length; i++) {
357
+ var temp_codecSelectBox1 = document.getElementById('codecSelectBox1');
358
+ var temp_codecSelectBox1_inOption = document.createElement('option');
359
+ temp_codecSelectBox1_inOption.value = FORMAT_LIST_JSON.codecList[i].id;
360
+ temp_codecSelectBox1_inOption.text = FORMAT_LIST_JSON.codecList[i].label;
361
+ if (FORMAT_LIST_JSON.codecList[i].id === DEFAULT_SELECTED[0].codec) {
362
+ temp_codecSelectBox1_inOption.selected = true;
363
+ }
364
+ temp_codecSelectBox1.appendChild(temp_codecSelectBox1_inOption);
365
+ }
366
+ for (let i = 0; i < FORMAT_LIST_JSON.length; i++) {
367
+ var temp_codecSelectBox2 = document.getElementById('codecSelectBox2');
368
+ var temp_codecSelectBox2_inOption = document.createElement('option');
369
+ temp_codecSelectBox2_inOption.value = FORMAT_LIST_JSON.codecList[i].id;
370
+ temp_codecSelectBox2_inOption.text = FORMAT_LIST_JSON.codecList[i].label;
371
+ if (FORMAT_LIST_JSON.codecList[i].id === DEFAULT_SELECTED[1].codec) {
372
+ temp_codecSelectBox2_inOption.selected = true;
373
+ }
374
+ temp_codecSelectBox2.appendChild(temp_codecSelectBox2_inOption);
375
+ }
376
+ });
377
+ function refreshRcSelectBox() {
378
+ var temp_codecSelectBox1_selected_index = document.getElementById('codecSelectBox1').selectedIndex;
379
+ var temp_codecSelectBox2_selected_index = document.getElementById('codecSelectBox2').selectedIndex;
380
+ var temp_codecSelectBox1_selected_option = document.getElementById('codecSelectBox1').options[temp_codecSelectBox1_selected_index];
381
+ var temp_codecSelectBox2_selected_option = document.getElementById('codecSelectBox2').options[temp_codecSelectBox2_selected_index];
382
+ for (let i = 0; i < FORMAT_LIST_JSON[temp_codecSelectBox1_selected_option.value].rcList.length; i++) {
383
+ var temp_rcSelectBox1 = document.getElementById('rcSelectBox1');
384
+ var temp_rcSelectBox1_inOption = document.createElement('option');
385
+ temp_rcSelectBox1_inOption.value = FORMAT_LIST_JSON[temp_codecSelectBox1_selected_option.value].rcList[i].id;
386
+ temp_rcSelectBox1_inOption.text = FORMAT_LIST_JSON[temp_codecSelectBox1_selected_option.value].rcList[i].label;
387
+ if (FORMAT_LIST_JSON[temp_codecSelectBox1_selected_option.value].rcList[i].id === DEFAULT_SELECTED[0].rc) {
388
+ temp_rcSelectBox1_inOption.selected = true;
389
+ }
390
+ temp_rcSelectBox1.appendChild(temp_rcSelectBox1_inOption);
391
+ }
392
+ for (let i = 0; i < FORMAT_LIST_JSON[temp_codecSelectBox2_selected_option.value].rcList.length; i++) {
393
+ var temp_rcSelectBox2 = document.getElementById('rcSelectBox2');
394
+ var temp_rcSelectBox2_inOption = document.createElement('option');
395
+ temp_rcSelectBox2_inOption.value = FORMAT_LIST_JSON[temp_codecSelectBox2_selected_option.value].rcList[i].id;
396
+ temp_rcSelectBox2_inOption.text = FORMAT_LIST_JSON[temp_codecSelectBox2_selected_option.value].rcList[i].label;
397
+ if (FORMAT_LIST_JSON[temp_codecSelectBox2_selected_option.value].rcList[i].id === DEFAULT_SELECTED[1].rc) {
398
+ temp_rcSelectBox2_inOption.selected = true;
399
+ }
400
+ temp_rcSelectBox2.appendChild(temp_rcSelectBox2_inOption);
401
+ }
402
+ }
403
+ </script>
404
+ </body>
405
+ </html>
test.js ADDED
The diff for this file is too large to render. See raw diff
 
umm_audiosync_test.html CHANGED
@@ -1,289 +1,289 @@
1
- <html>
2
- <head>
3
- <meta charset="utf-8" />
4
- <meta name="viewport" content="width=device-width, initial-scale=1.00" />
5
- <meta name="robots" content="noindex,nofollow,noarchive" />
6
- <script
7
- src="https://code.jquery.com/jquery-3.6.1.min.js"
8
- integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
9
- crossorigin="anonymous"
10
- ></script>
11
- <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
12
- <link
13
- rel="stylesheet"
14
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
15
- />
16
- <link
17
- href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css"
18
- rel="stylesheet"
19
- type="text/css"
20
- media="all"
21
- />
22
- <style>
23
- html,
24
- body {
25
- color: #fff;
26
- background: #000;
27
- margin: 0;
28
- line-height: 1;
29
- width: 100vw;
30
- height: 100vh;
31
- font-family: "A-OTF UD Shin Go Pro", system-ui;
32
- }
33
- textarea,
34
- button {
35
- color: #fff;
36
- background: #000;
37
- width: 100vw;
38
- font-family: system-ui;
39
- resize: none;
40
- }
41
- .inputbox {
42
- color: #fff;
43
- background: #000;
44
- width: 20vw;
45
- font-family: system-ui;
46
- }
47
- </style>
48
- <script>
49
- function logger(text) {
50
- document.getElementById("textbox").value += "\r\n" + text; // 新しい行に文字列を追加する
51
- }
52
- // 以下のスクリプトはBing(ChatGPT)が生成したものに追記したものです。
53
- // プロンプト:
54
- // ある曲のカラオケバージョンの音源と、3人分のボーカルの音源があります。つまり、4つの音声ファイルがあります。これらのファイルを完全に同期して同時再生するコードを、Howler.jsを使用した上でHTMLとJavaScriptで書いてください。
55
-
56
- var howls = [];
57
- // 同期再生用の関数を定義
58
- function playSync() {
59
- stopAll();
60
- var liveID = document.getElementById("liveIDBox").value;
61
- var charaID = [
62
- document.getElementById("charaIDBox1").value,
63
- document.getElementById("charaIDBox2").value,
64
- document.getElementById("charaIDBox3").value,
65
- ];
66
- var okeVol = document.getElementById("okeVolBox").value;
67
- var charaVol1 = document.getElementById("charaVolBox1").value;
68
- var charaVol2 = document.getElementById("charaVolBox2").value;
69
- var charaPan = document.getElementById("charaPanBox").value;
70
- // 音声ファイルのパスを配列に格納
71
- var audioFiles = [
72
- `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_oke_02/snd_bgm_live_${liveID}_oke_02_1.m4a`,
73
- `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_chara_${charaID[0]}_01/snd_bgm_live_${liveID}_chara_${charaID[0]}_01_1.m4a`,
74
- `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_chara_${charaID[1]}_01/snd_bgm_live_${liveID}_chara_${charaID[1]}_01_1.m4a`,
75
- `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_chara_${charaID[2]}_01/snd_bgm_live_${liveID}_chara_${charaID[2]}_01_1.m4a`,
76
- ];
77
- logger("playSync関数が呼び出されました");
78
- logger(`liveIDは${liveID}です`);
79
- // logger(`liveIDのtext_dataは${master_db_text_data_search(16, liveID).text}です`);
80
- for (let i = 0; i < charaID.length; i++) {
81
- logger(`charaIDは${charaID[i]}です: id=${i + 1}`);
82
- }
83
- document.getElementById("urllistbox").value = "";
84
- remote_file_head_test(audioFiles).then((statusList) => {
85
- if (statusList.every((status) => status === 200)) {
86
- for (let i = 0; i < statusList.length; i++) {
87
- logger(`リモートファイルへHEADしました: id=${i}, status=${statusList[i]}`);
88
- };
89
- logger(`リモートファイルは正常です`);
90
- // 配列の要素数だけ繰り返す
91
- for (let i = 0; i < audioFiles.length; i++) {
92
- // Howlオブジェクトを作成して配列に追加
93
- howls[i] = new Howl({
94
- src: audioFiles[i], // 音声ファイルのパス
95
- preload: true, // 読み込み完了まで待つかどうか
96
- autoplay: false, // 自動再生するかどうか
97
- loop: true, // ループ再生するかどうか
98
- });
99
- logger(`Howlオブジェクトを作成しました: id=${i}`);
100
- }
101
- // 全ての音声ファイルが読み込まれたら実行する関数を設定
102
- var loadedCount = 0; // 読み込まれた音声ファイルの数
103
- var onLoad = function () {
104
- loadedCount++; // 読み込まれた数を増やす
105
- logger(
106
- `音声ファイルがプリロードされました: id=${loadedCount - 1}`
107
- );
108
- document.getElementById("urllistbox").value +=
109
- audioFiles[loadedCount - 1].match(/([^\/?#]+)(?=[^\/]*$)/)[0] +
110
- "\r\n";
111
- if (loadedCount == audioFiles.length) {
112
- // 全て読み込まれたら
113
- howls[0].volume(okeVol);
114
- logger(
115
- `Howlオブジェクトのvolumeを変更しました: id=0, value=${okeVol}`
116
- );
117
- for (let j = 2; j <= 3; j++) {
118
- howls[j].volume(charaVol2); // ボーカルの音源3つ（インデックス1から3）の音量を設定（追加したコード）
119
- logger(
120
- `Howlオブジェクトのvolumeを変更しました: id=${j}, value=${charaVol2}`
121
- );
122
- }
123
- howls[1].volume(charaVol1);
124
- logger(
125
- `Howlオブジェクトのvolumeを変更しました: id=1, value=${charaVol1}`
126
- );
127
- howls[2].stereo(0 - charaPan); // 特定のボーカルだけ左チャンネルに寄せる（追加したコード）
128
- logger(
129
- `Howlオブジェクトのstereoを変更しました: id=2, value=${
130
- 0 - charaPan
131
- }`
132
- );
133
- howls[3].stereo(charaPan); // 特定のボーカルだけ右チャンネルに寄せる（追加したコード）
134
- logger(
135
- `Howlオブジェクトのstereoを変更しました: id=3, value=${charaPan}`
136
- );
137
- for (let j = 0; j < howls.length; j++) {
138
- // 配列の要素数だけ繰り返す
139
- howls[j].play(); // 再生する（Howlオブジェクトは自動的に同期される）
140
- logger(`Howlオブジェクトを再生しました: id=${j}`);
141
- }
142
- }
143
- };
144
- for (let k = 0; k < howls.length; k++) {
145
- // 配列の要素数だけ繰り返す
146
- howls[k].once("load", onLoad); // 読み込み完了時にonLoad関数を実行するように設定
147
- }
148
- } else {
149
- for (let i = 0; i < statusList.length; i++) {
150
- logger(`リモートファイルへHEADしました: id=${i}, status=${statusList[i]}`);
151
- }
152
- logger(`リモートファイルの一部に問題があります`);
153
- }
154
- });
155
- }
156
- // 再生停止用の関数を定義（追加したコード）
157
- function stopAll() {
158
- for (var n = 0; n < howls.length; n++) {
159
- // 配列の要素数だけ繰り返す
160
- howls[n].stop(); // 停止する
161
- howls[n].unload();
162
- }
163
- document.getElementById("textbox").value =
164
- "Logger出力はここに表示されます";
165
- logger(`stopAll関数が呼び出されました`);
166
- }
167
- function master_db_text_data_search(categoryNumber, idNumber) {
168
- fetch(
169
- "https://cdn.jsdelivr.net/gh/daydreamer-json/umm_master_db@main/json/text_data.json"
170
- )
171
- .then((response) => response.json())
172
- .then((data) => {
173
- var master_db_text_data = data;
174
- logger(`マスターデータベースを読み込みました`);
175
- let categoryResult = master_db_text_data.filter(function (obj) {
176
- return obj.category === categoryNumber;
177
- });
178
- let integratedResult = categoryResult.filter(function (obj) {
179
- return obj.id === idNumber;
180
- });
181
- return integratedResult[0];
182
- })
183
- .catch((error) => {
184
- console.error(error);
185
- return null;
186
- });
187
- }
188
- async function remote_file_head_test(audioFilesList) {
189
- const promises = audioFilesList.map((url) =>
190
- fetch(url, { method: "HEAD" })
191
- );
192
- const responses = await Promise.all(promises);
193
- return responses.map((response) => response.status);
194
- }
195
- </script>
196
- </head>
197
- <body>
198
- <button onclick="playSync()" style="font-size: 24px">同期再生</button>
199
- <button onclick="stopAll()" style="display: none">停止</button>
200
- <br />
201
- <input
202
- class="inputbox"
203
- id="liveIDBox"
204
- type="number"
205
- inputmode="numeric"
206
- required
207
- min="1001"
208
- max="9999"
209
- value="1036"
210
- />
211
- <input
212
- class="inputbox"
213
- id="charaIDBox1"
214
- type="number"
215
- inputmode="numeric"
216
- required
217
- min="1001"
218
- max="9999"
219
- value="1001"
220
- />
221
- <input
222
- class="inputbox"
223
- id="charaIDBox2"
224
- type="number"
225
- inputmode="numeric"
226
- required
227
- min="1001"
228
- max="9999"
229
- value="1002"
230
- />
231
- <input
232
- class="inputbox"
233
- id="charaIDBox3"
234
- type="number"
235
- inputmode="numeric"
236
- required
237
- min="1001"
238
- max="9999"
239
- value="1003"
240
- />
241
- <br />
242
- <input
243
- class="inputbox"
244
- id="okeVolBox"
245
- type="number"
246
- inputmode="decimal"
247
- required
248
- min="0.0"
249
- max="1.0"
250
- value="1"
251
- />
252
- <input
253
- class="inputbox"
254
- id="charaVolBox1"
255
- type="number"
256
- inputmode="decimal"
257
- required
258
- min="0.0"
259
- max="1.0"
260
- value="0.8"
261
- />
262
- <input
263
- class="inputbox"
264
- id="charaVolBox2"
265
- type="number"
266
- inputmode="decimal"
267
- required
268
- min="0.0"
269
- max="1.0"
270
- value="0.6"
271
- />
272
- <input
273
- class="inputbox"
274
- id="charaPanBox"
275
- type="number"
276
- inputmode="decimal"
277
- required
278
- min="0.0"
279
- max="1.0"
280
- value="0.35"
281
- />
282
- <br />
283
- <textarea id="textbox" style="height: 400px" readonly>
284
- Logger出力はここに表示されます</textarea
285
- >
286
- <br />
287
- <textarea id="urllistbox" style="height: 8em" readonly></textarea>
288
- </body>
289
- </html>
 
1
+ <html>
2
+ <head>
3
+ <meta charset="utf-8" />
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.00" />
5
+ <meta name="robots" content="noindex,nofollow,noarchive" />
6
+ <script
7
+ src="https://code.jquery.com/jquery-3.6.1.min.js"
8
+ integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
9
+ crossorigin="anonymous"
10
+ ></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
12
+ <link
13
+ rel="stylesheet"
14
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
15
+ />
16
+ <link
17
+ href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css"
18
+ rel="stylesheet"
19
+ type="text/css"
20
+ media="all"
21
+ />
22
+ <style>
23
+ html,
24
+ body {
25
+ color: #fff;
26
+ background: #000;
27
+ margin: 0;
28
+ line-height: 1;
29
+ width: 100vw;
30
+ height: 100vh;
31
+ font-family: "A-OTF UD Shin Go Pro", system-ui;
32
+ }
33
+ textarea,
34
+ button {
35
+ color: #fff;
36
+ background: #000;
37
+ width: 100vw;
38
+ font-family: system-ui;
39
+ resize: none;
40
+ }
41
+ .inputbox {
42
+ color: #fff;
43
+ background: #000;
44
+ width: 20vw;
45
+ font-family: system-ui;
46
+ }
47
+ </style>
48
+ <script>
49
+ function logger(text) {
50
+ document.getElementById("textbox").value += "\r\n" + text; // 新しい行に文字列を追加する
51
+ }
52
+ // 以下のスクリプトはBing(ChatGPT)が生成したものに追記したものです。
53
+ // プロンプト:
54
+ // ある曲のカラオケバージョンの音源と、3人分のボーカルの音源があります。つまり、4つの音声ファイルがあります。これらのファイルを完全に同期して同時再生するコードを、Howler.jsを使用した上でHTMLとJavaScriptで書いてください。
55
+
56
+ var howls = [];
57
+ // 同期再生用の関数を定義
58
+ function playSync() {
59
+ stopAll();
60
+ var liveID = document.getElementById("liveIDBox").value;
61
+ var charaID = [
62
+ document.getElementById("charaIDBox1").value,
63
+ document.getElementById("charaIDBox2").value,
64
+ document.getElementById("charaIDBox3").value,
65
+ ];
66
+ var okeVol = document.getElementById("okeVolBox").value;
67
+ var charaVol1 = document.getElementById("charaVolBox1").value;
68
+ var charaVol2 = document.getElementById("charaVolBox2").value;
69
+ var charaPan = document.getElementById("charaPanBox").value;
70
+ // 音声ファイルのパスを配列に格納
71
+ var audioFiles = [
72
+ `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_oke_02/snd_bgm_live_${liveID}_oke_02_1.m4a`,
73
+ `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_chara_${charaID[0]}_01/snd_bgm_live_${liveID}_chara_${charaID[0]}_01_1.m4a`,
74
+ `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_chara_${charaID[1]}_01/snd_bgm_live_${liveID}_chara_${charaID[1]}_01_1.m4a`,
75
+ `https://cdn.jsdelivr.net/gh/daydreamer-json/umm_assets@main/sound/l/${liveID}/snd_bgm_live_${liveID}_chara_${charaID[2]}_01/snd_bgm_live_${liveID}_chara_${charaID[2]}_01_1.m4a`,
76
+ ];
77
+ logger("playSync関数が呼び出されました");
78
+ logger(`liveIDは${liveID}です`);
79
+ // logger(`liveIDのtext_dataは${master_db_text_data_search(16, liveID).text}です`);
80
+ for (let i = 0; i < charaID.length; i++) {
81
+ logger(`charaIDは${charaID[i]}です: id=${i + 1}`);
82
+ }
83
+ document.getElementById("urllistbox").value = "";
84
+ remote_file_head_test(audioFiles).then((statusList) => {
85
+ if (statusList.every((status) => status === 200)) {
86
+ for (let i = 0; i < statusList.length; i++) {
87
+ logger(`リモートファイルへHEADしました: id=${i}, status=${statusList[i]}`);
88
+ };
89
+ logger(`リモートファイルは正常です`);
90
+ // 配列の要素数だけ繰り返す
91
+ for (let i = 0; i < audioFiles.length; i++) {
92
+ // Howlオブジェクトを作成して配列に追加
93
+ howls[i] = new Howl({
94
+ src: audioFiles[i], // 音声ファイルのパス
95
+ preload: true, // 読み込み完了まで待つかどうか
96
+ autoplay: false, // 自動再生するかどうか
97
+ loop: true, // ループ再生するかどうか
98
+ });
99
+ logger(`Howlオブジェクトを作成しました: id=${i}`);
100
+ }
101
+ // 全ての音声ファイルが読み込まれたら実行する関数を設定
102
+ var loadedCount = 0; // 読み込まれた音声ファイルの数
103
+ var onLoad = function () {
104
+ loadedCount++; // 読み込まれた数を増やす
105
+ logger(
106
+ `音声ファイルがプリロードされました: id=${loadedCount - 1}`
107
+ );
108
+ document.getElementById("urllistbox").value +=
109
+ audioFiles[loadedCount - 1].match(/([^\/?#]+)(?=[^\/]*$)/)[0] +
110
+ "\r\n";
111
+ if (loadedCount == audioFiles.length) {
112
+ // 全て読み込まれたら
113
+ howls[0].volume(okeVol);
114
+ logger(
115
+ `Howlオブジェクトのvolumeを変更しました: id=0, value=${okeVol}`
116
+ );
117
+ for (let j = 2; j <= 3; j++) {
118
+ howls[j].volume(charaVol2); // ボーカルの音源3つ（インデックス1から3）の音量を設定（追加したコード）
119
+ logger(
120
+ `Howlオブジェクトのvolumeを変更しました: id=${j}, value=${charaVol2}`
121
+ );
122
+ }
123
+ howls[1].volume(charaVol1);
124
+ logger(
125
+ `Howlオブジェクトのvolumeを変更しました: id=1, value=${charaVol1}`
126
+ );
127
+ howls[2].stereo(0 - charaPan); // 特定のボーカルだけ左チャンネルに寄せる（追加したコード）
128
+ logger(
129
+ `Howlオブジェクトのstereoを変更しました: id=2, value=${
130
+ 0 - charaPan
131
+ }`
132
+ );
133
+ howls[3].stereo(charaPan); // 特定のボーカルだけ右チャンネルに寄せる（追加したコード）
134
+ logger(
135
+ `Howlオブジェクトのstereoを変更しました: id=3, value=${charaPan}`
136
+ );
137
+ for (let j = 0; j < howls.length; j++) {
138
+ // 配列の要素数だけ繰り返す
139
+ howls[j].play(); // 再生する（Howlオブジェクトは自動的に同期される）
140
+ logger(`Howlオブジェクトを再生しました: id=${j}`);
141
+ }
142
+ }
143
+ };
144
+ for (let k = 0; k < howls.length; k++) {
145
+ // 配列の要素数だけ繰り返す
146
+ howls[k].once("load", onLoad); // 読み込み完了時にonLoad関数を実行するように設定
147
+ }
148
+ } else {
149
+ for (let i = 0; i < statusList.length; i++) {
150
+ logger(`リモートファイルへHEADしました: id=${i}, status=${statusList[i]}`);
151
+ }
152
+ logger(`リモートファイルの一部に問題があります`);
153
+ }
154
+ });
155
+ }
156
+ // 再生停止用の関数を定義（追加したコード）
157
+ function stopAll() {
158
+ for (var n = 0; n < howls.length; n++) {
159
+ // 配列の要素数だけ繰り返す
160
+ howls[n].stop(); // 停止する
161
+ howls[n].unload();
162
+ }
163
+ document.getElementById("textbox").value =
164
+ "Logger出力はここに表示されます";
165
+ logger(`stopAll関数が呼び出されました`);
166
+ }
167
+ function master_db_text_data_search(categoryNumber, idNumber) {
168
+ fetch(
169
+ "https://cdn.jsdelivr.net/gh/daydreamer-json/umm_master_db@main/json/text_data.json"
170
+ )
171
+ .then((response) => response.json())
172
+ .then((data) => {
173
+ var master_db_text_data = data;
174
+ logger(`マスターデータベースを読み込みました`);
175
+ let categoryResult = master_db_text_data.filter(function (obj) {
176
+ return obj.category === categoryNumber;
177
+ });
178
+ let integratedResult = categoryResult.filter(function (obj) {
179
+ return obj.id === idNumber;
180
+ });
181
+ return integratedResult[0];
182
+ })
183
+ .catch((error) => {
184
+ console.error(error);
185
+ return null;
186
+ });
187
+ }
188
+ async function remote_file_head_test(audioFilesList) {
189
+ const promises = audioFilesList.map((url) =>
190
+ fetch(url, { method: "HEAD" })
191
+ );
192
+ const responses = await Promise.all(promises);
193
+ return responses.map((response) => response.status);
194
+ }
195
+ </script>
196
+ </head>
197
+ <body>
198
+ <button onclick="playSync()" style="font-size: 24px">同期再生</button>
199
+ <button onclick="stopAll()" style="display: none">停止</button>
200
+ <br />
201
+ <input
202
+ class="inputbox"
203
+ id="liveIDBox"
204
+ type="number"
205
+ inputmode="numeric"
206
+ required
207
+ min="1001"
208
+ max="9999"
209
+ value="1036"
210
+ />
211
+ <input
212
+ class="inputbox"
213
+ id="charaIDBox1"
214
+ type="number"
215
+ inputmode="numeric"
216
+ required
217
+ min="1001"
218
+ max="9999"
219
+ value="1001"
220
+ />
221
+ <input
222
+ class="inputbox"
223
+ id="charaIDBox2"
224
+ type="number"
225
+ inputmode="numeric"
226
+ required
227
+ min="1001"
228
+ max="9999"
229
+ value="1002"
230
+ />
231
+ <input
232
+ class="inputbox"
233
+ id="charaIDBox3"
234
+ type="number"
235
+ inputmode="numeric"
236
+ required
237
+ min="1001"
238
+ max="9999"
239
+ value="1003"
240
+ />
241
+ <br />
242
+ <input
243
+ class="inputbox"
244
+ id="okeVolBox"
245
+ type="number"
246
+ inputmode="decimal"
247
+ required
248
+ min="0.0"
249
+ max="1.0"
250
+ value="1"
251
+ />
252
+ <input
253
+ class="inputbox"
254
+ id="charaVolBox1"
255
+ type="number"
256
+ inputmode="decimal"
257
+ required
258
+ min="0.0"
259
+ max="1.0"
260
+ value="0.8"
261
+ />
262
+ <input
263
+ class="inputbox"
264
+ id="charaVolBox2"
265
+ type="number"
266
+ inputmode="decimal"
267
+ required
268
+ min="0.0"
269
+ max="1.0"
270
+ value="0.6"
271
+ />
272
+ <input
273
+ class="inputbox"
274
+ id="charaPanBox"
275
+ type="number"
276
+ inputmode="decimal"
277
+ required
278
+ min="0.0"
279
+ max="1.0"
280
+ value="0.35"
281
+ />
282
+ <br />
283
+ <textarea id="textbox" style="height: 400px" readonly>
284
+ Logger出力はここに表示されます</textarea
285
+ >
286
+ <br />
287
+ <textarea id="urllistbox" style="height: 8em" readonly></textarea>
288
+ </body>
289
+ </html>