Spaces:

daydreamer-json
/

hp

Running

App Files Files Community

daydreamer-json commited on Dec 6, 2022

Commit

a0770ff

unverified ·

1 Parent(s): a50fd29

Create aud_sync_test2.html

Browse files

Files changed (1) hide show

aud_sync_test2.html +411 -0

aud_sync_test2.html ADDED Viewed

	@@ -0,0 +1,411 @@

+<!DOCTYPE html>
+<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,[email protected],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/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001.flac",
+                "https://storage.sekai.best/sekai-assets/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001-1.flac",
+                "https://storage.sekai.best/sekai-assets/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001-2.flac",
+                "https://storage.sekai.best/sekai-assets/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001-3.flac",
+                "https://storage.sekai.best/sekai-assets/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001-4.flac",
+                "https://storage.sekai.best/sekai-assets/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001-5.flac",
+                "https://storage.sekai.best/sekai-assets/sound/virtual_live/lobby_bgm/bgm_vl_001_rip/bgm_vl_001-6.flac"
+            ];
+            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) < 25) {
+                    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) < 40) {
+                    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 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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <p>Max Sync Latency: <span id="dbg_lat">---</span> ms</p>
+            </div>
+            <div id="siri-container"></div>
+        </div>
+    </body>
+</html>