Spaces:
Running
Running
| <html lang='en'> | |
| <head> | |
| <title>test</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.00"> | |
| <meta name="robots" content="noindex,nofollow,noarchive"> | |
| <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> | |
| <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> | |
| <script src="https://unpkg.com/siriwave/dist/siriwave.umd.min.js"></script> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> | |
| <link href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css" rel="stylesheet" type="text/css" media="all"> | |
| <style> | |
| .material-symbols-rounded { | |
| font-variation-settings: | |
| 'FILL' 1, | |
| 'wght' 400, | |
| 'GRAD' 0, | |
| 'opsz' 48 | |
| } | |
| html, body { | |
| font-size: 100%; | |
| } | |
| table, th, td { | |
| border-collapse: collapse; | |
| white-space: nowrap; | |
| border: 1px solid #000; | |
| } | |
| th { | |
| background-color: rgba(255,255,255,0.3); | |
| } | |
| html, body { | |
| color: #000; | |
| margin: 0; | |
| line-height: 1; | |
| } | |
| .main { | |
| background: rgb(218,255,255); | |
| background: linear-gradient(220deg, rgba(218,255,255,1) 0%, rgba(142,245,255,1) 100%); | |
| } | |
| hr { | |
| border: 0 none; | |
| height: 1.5px; | |
| color: #000; | |
| background-color: #000; | |
| } | |
| a { | |
| color: #000; | |
| } | |
| .unavailable_text { | |
| color: #808080; | |
| } | |
| .footer { | |
| color: #000; | |
| background: rgb(218,255,255); | |
| background: linear-gradient(220deg, rgba(218,255,255,1) 0%, rgba(142,245,255,1) 100%); | |
| } | |
| .opening_anim { | |
| color: #000; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| table, th, td { | |
| border: 1px solid #fff; | |
| } | |
| th { | |
| background-color: rgba(0,0,0,0.3); | |
| } | |
| html, body, .main { | |
| color: #fff; | |
| background: rgb(0,43,51); | |
| background: linear-gradient(220deg, rgba(0,43,51,1) 0%, rgba(0,101,128,1) 100%); | |
| } | |
| hr { | |
| color: #fff; | |
| background-color: #fff; | |
| } | |
| a { | |
| color: #fff; | |
| } | |
| .unavailable_text { | |
| color: #808080; | |
| } | |
| .footer { | |
| color: #fff; | |
| background: rgb(0,43,51); | |
| background: linear-gradient(220deg, rgba(0,43,51,1) 0%, rgba(0,101,128,1) 100%); | |
| } | |
| .opening_anim { | |
| color: #000; | |
| } | |
| } | |
| th, td { | |
| padding: 5px; | |
| } | |
| .title_head h1 { | |
| margin: 0; | |
| padding-top: 30px; | |
| } | |
| header { | |
| text-align: center; | |
| } | |
| .content { | |
| width: 100%; | |
| overflow-x: scroll; | |
| overflow-y: auto; | |
| } | |
| .content_table { | |
| width: 10000px; | |
| padding: 2px; | |
| } | |
| .main { | |
| font-family: 'A-OTF UD Shin Go Pro', system-ui; | |
| width: 100vw; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| position: absolute; | |
| } | |
| .footer audio { | |
| width: 100vw; | |
| } | |
| .footer { | |
| position: fixed; | |
| width: 100vw; | |
| bottom: 0%; | |
| } | |
| .playString { | |
| /* text-decoration: underline; */ | |
| cursor: pointer; | |
| } | |
| .opening_anim { | |
| font-family: 'A-OTF UD Shin Go Pro', system-ui; | |
| position: fixed; | |
| height: 100vh; | |
| width: 100vw; | |
| z-index: 500; | |
| display: block; | |
| background: rgb(218,255,255); | |
| background: linear-gradient(220deg, rgba(218,255,255,1) 0%, rgba(142,245,255,1) 100%); | |
| } | |
| .opening_anim_image { | |
| top: 50%; | |
| left: 50%; | |
| transform: translateY(-55%) translateX(-50%); | |
| position: absolute; | |
| display: none; | |
| z-index: 520; | |
| will-change: filter; | |
| } | |
| .opening_anim_image_f { | |
| top: 50%; | |
| left: 50%; | |
| transform: translateY(-55%) translateX(-50%); | |
| position: absolute; | |
| width: 50vw; | |
| display: none; | |
| z-index: 520; | |
| will-change: filter; | |
| } | |
| .opening_anim_image_shadow { | |
| top: 50%; | |
| left: 50%; | |
| transform: translateY(-55%) translateX(-50%); | |
| position: absolute; | |
| display: none; | |
| z-index: 519; | |
| filter: blur(1.5vh); | |
| opacity: 1; | |
| will-change: filter; | |
| } | |
| .opening_anim_image_shadow_f { | |
| top: 50%; | |
| left: 50%; | |
| transform: translateY(-55%) translateX(-50%); | |
| position: absolute; | |
| width: 50vw; | |
| display: none; | |
| z-index: 519; | |
| filter: blur(1.5vh); | |
| opacity: 1; | |
| will-change: filter; | |
| } | |
| .opening_text { | |
| top: 50%; | |
| left: 50%; | |
| transform: translateY(-55%) translateX(-50%); | |
| width: 90vw; | |
| position: absolute; | |
| display: none; | |
| z-index: 518; | |
| will-change: filter; | |
| } | |
| .loading_database_text { | |
| top: 50%; | |
| left: 50%; | |
| transform: translateY(-55%) translateX(-50%); | |
| width: 90vw; | |
| position: absolute; | |
| display: none; | |
| z-index: 610; | |
| will-change: filter; | |
| } | |
| .loading_database_text_shadow { | |
| top: 50%; | |
| left: 50%; | |
| transform: translateY(-55%) translateX(-50%); | |
| width: 90vw; | |
| position: absolute; | |
| display: none; | |
| z-index: 609; | |
| filter: blur(1.5vh); | |
| will-change: filter; | |
| } | |
| .opening_text_shadow { | |
| top: 50%; | |
| left: 50%; | |
| transform: translateY(-55%) translateX(-50%); | |
| width: 90vw; | |
| position: absolute; | |
| display: none; | |
| z-index: 517; | |
| filter: blur(1.5vh); | |
| will-change: filter; | |
| } | |
| .opening_text_title, .opening_text_string, .loading_database_text_title { | |
| text-align: center; | |
| } | |
| .opening_text_title { | |
| font-weight: 700; | |
| font-size: 110%; | |
| letter-spacing: 0.15em; | |
| margin: 2.25em auto 2.25em auto; | |
| } | |
| .opening_text_string p, .loading_database_text_title { | |
| margin: 0.3em auto 0.3em auto; | |
| line-height: 1.5; | |
| } | |
| @media screen and (max-width: 400px) { | |
| .opening_anim_image { | |
| height: 10vh; | |
| } | |
| .opening_anim_image_shadow { | |
| height: 10vh; | |
| } | |
| } | |
| @media screen and (min-width: 401px) { | |
| .opening_anim_image { | |
| height: 10vw; | |
| } | |
| .opening_anim_image_shadow { | |
| height: 10vw; | |
| } | |
| } | |
| .material-symbols-rounded { | |
| display: block; | |
| line-height: 0; | |
| font-size: 20px; | |
| text-decoration: none; | |
| } | |
| .ytlink { | |
| text-decoration: none; | |
| } | |
| /* VISUALIZER */ | |
| </style> | |
| <script> | |
| // SYNC PLAY AUDIO SRC | |
| const AUDIO_SOURCE = [ | |
| "https://storage.sekai.best/sekai-assets/streaming_live/music/sc_2nd_live_anv_rip/sc_2nd_live_anv.mp3", | |
| "https://storage.sekai.best/sekai-assets/streaming_live/music/sc_2nd_live_anv_rip/sc_2nd_live_anv_aud.mp3" | |
| ]; | |
| var sound = new Array(); | |
| for (let i = 0; i < AUDIO_SOURCE.length; i++) { | |
| let stereo_sep = ((AUDIO_SOURCE.length / (i + 1)) * 2 - 1); | |
| sound.push(new Howl({ | |
| src: [AUDIO_SOURCE[i]], | |
| stereo: stereo_sep, | |
| loop: false | |
| })); | |
| }; | |
| function start () { | |
| var clone = document.getElementById("siri-container").cloneNode(false); | |
| document.getElementById("siri-container").parentNode.replaceChild(clone, document.getElementById("siri-container")); | |
| /* var siriWave = new SiriWave({ | |
| container: document.getElementById("siri-container"), | |
| autostart: true, | |
| height: 128, | |
| style: "ios9", | |
| speed: 0.15, | |
| amplitude: 1.5 | |
| }); */ | |
| document.getElementById("start_btn").innerHTML = 'Click this label to restart'; | |
| var sound_id = new Array(); | |
| for (var i = 1; i < 99999; i++) { | |
| clearInterval(i); | |
| }; | |
| for (let i = 0; i < sound.length; i++) { | |
| sound[i].stop(); | |
| }; | |
| for (let i = 0; i < sound.length; i++) { | |
| sound_id.push(sound[i].play()); | |
| }; | |
| for (let i = 0; i < sound.length; i++) { | |
| sound[i].pause(sound_id[i]); | |
| }; | |
| for (let i = 0; i < sound.length; i++) { | |
| sound[i].play(sound_id[i]); | |
| }; | |
| setInterval(audioDebugDispRefresh, 30); | |
| for (let i = 0; i < sound.length; i++) { | |
| sound[i].seek(0, sound_id[i]); | |
| }; | |
| }; | |
| function audioDebugDispRefresh () { | |
| var sound_nowTime = new Array(); | |
| for (let i = 0; i < sound.length; i++) { | |
| sound_nowTime.push(sound[i].seek()); | |
| }; | |
| for (let i = 0; i < sound.length; i++) { | |
| document.getElementById(`dbg_snd${i}_sec`).innerHTML = floorDecimal(sound_nowTime[i], 5); | |
| }; | |
| var latency_ary = new Array(); | |
| for (let i = 0; i < sound.length; i++) { | |
| if (i != sound.length - 1) { | |
| latency_ary.push(Math.abs(floorDecimal((sound_nowTime[i] - sound_nowTime[i + 1]) * 1000, 2))); | |
| }; | |
| }; | |
| document.getElementById("dbg_lat").innerHTML = latency_ary.reduce(aryMax); | |
| if (latency_ary.reduce(aryMax) < 10) { | |
| if (window.matchMedia('(prefers-color-scheme: dark)').matches == true) { | |
| document.getElementById("dbg_lat").style.color = '#60ff60'; | |
| } else { | |
| document.getElementById("dbg_lat").style.color = '#00aa00'; | |
| }; | |
| } else if (latency_ary.reduce(aryMax) < 25) { | |
| if (window.matchMedia('(prefers-color-scheme: dark)').matches == true) { | |
| document.getElementById("dbg_lat").style.color = '#ffff60'; | |
| } else { | |
| document.getElementById("dbg_lat").style.color = '#aaaa00'; | |
| }; | |
| } else { | |
| if (window.matchMedia('(prefers-color-scheme: dark)').matches == true) { | |
| document.getElementById("dbg_lat").style.color = '#ff6060'; | |
| } else { | |
| document.getElementById("dbg_lat").style.color = '#aa0000'; | |
| }; | |
| }; | |
| }; | |
| function toggleMute (id) { | |
| if (document.getElementById("chkbx_" + id).checked) { | |
| sound[id].mute(false); | |
| document.getElementById("snd_txt" + id).style.opacity = 1; | |
| } else { | |
| sound[id].mute(true); | |
| document.getElementById("snd_txt" + id).style.opacity = 0.5; | |
| }; | |
| }; | |
| function toggleMuteRefreshAll () { | |
| for (let i = 0; i < sound.length; i++) { | |
| if (document.getElementById("chkbx_" + i).checked) { | |
| sound[i].mute(false); | |
| } else { | |
| sound[i].mute(true); | |
| }; | |
| }; | |
| }; | |
| function floorDecimal (value, n) { | |
| return Math.floor(value * Math.pow(10, n)) / Math.pow(10, n); | |
| }; | |
| function ceilDecimal (value, n) { | |
| return Math.ceil(value * Math.pow(10, n)) / Math.pow(10, n); | |
| }; | |
| function roundDecimal (value, n) { | |
| return Math.round(value * Math.pow(10, n)) / Math.pow(10, n); | |
| }; | |
| function sleep(waitMsec) { | |
| var startMsec = new Date(); | |
| while (new Date() - startMsec < waitMsec); | |
| }; | |
| const aryMax = function (a, b) {return Math.max(a, b);}; | |
| const aryMin = function (a, b) {return Math.min(a, b);}; | |
| </script> | |
| </head> | |
| <body> | |
| <div class="main" draggable="true"> | |
| <div class="blk"> | |
| <h3>Multiple sound sync test</h3> | |
| <p><a id="start_btn" onclick="start()">Click this label to start</a></p> | |
| <p><a id="muterefresh_btn" onclick="toggleMuteRefreshAll()">Click this label to refresh mute state</a></p> | |
| <!-- <p><a onclick="skip()">CLICK THIS LABEL TO SKIP 10s</a></p> --> | |
| <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> | |
| <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> | |
| <p>Max Sync Latency: <span id="dbg_lat">---</span> ms</p> | |
| </div> | |
| <div id="siri-container"></div> | |
| </div> | |
| </body> | |
| </html> | |