Spaces:

daydreamer-json
/

hp

Running

App Files Files Community

daydreamer-json commited on Mar 24, 2023

Commit

701febb

•

1 Parent(s): 75730ed

test

Browse files

Files changed (2) hide show

ba_video_test.html +21 -0
stay_audio_format.html +405 -0

ba_video_test.html ADDED Viewed

	@@ -0,0 +1,21 @@

+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.00" />
+    <meta name="robots" content="noindex,nofollow,noarchive" />
+    <style>
+      html,body,video {
+        color: #fff;
+        background: #000;
+        margin: 0;
+        line-height: 1;
+        width: 100vw;
+        height: 100vh;
+        font-family: system-ui;
+      }
+    </style>
+  </head>
+  <body>
+    <video controls src="https://cdn.discordapp.com/attachments/873258418452987997/1088752256305872926/PV_2_2160p_24Mbps.mp4"></video>
+  </body>
+</html>

stay_audio_format.html ADDED Viewed

	@@ -0,0 +1,405 @@

+<html>
+  <head>
+    <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"></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>
+      html,
+      body {
+        color: #fff;
+        background: #000;
+        margin: 0;
+        line-height: 1;
+        width: 100vw;
+        height: 100vh;
+        font-family: "A-OTF UD Shin Go Pro", system-ui;
+      }
+      textarea,
+      button {
+        color: #fff;
+        background: #000;
+        width: 100vw;
+        font-family: system-ui;
+        resize: none;
+      }
+      .inputbox {
+        color: #fff;
+        background: #000;
+        width: 20vw;
+        font-family: system-ui;
+      }
+    </style>
+  </head>
+  <body>
+    <button onclick="playSync()" style="font-size: 24px">同期再生</button>
+    <button onclick="stopAll()" style="display: none">停止</button>
+    <br />
+    <input
+      class="inputbox"
+      id="liveIDBox"
+      type="number"
+      inputmode="numeric"
+      required
+      min="1001"
+      max="9999"
+      value="1036"
+    />
+    <select id="codecSelectBox1" class="selectBox1" required>
+    </select>
+    <select id="rcSelectBox1" class="selectBox1" required>
+    </select>
+    <select id="bitrateSelectBox1" class="selectBox1" required>
+    </select>
+    <br />
+    <select id="codecSelectBox2" class="selectBox2" required>
+    </select>
+    <select id="rcSelectBox2" class="selectBox2" required>
+    </select>
+    <select id="bitrateSelectBox2" class="selectBox2" required>
+    </select>
+    <br />
+    <textarea id="textbox" style="height: 400px" readonly>
+Logger出力はここに表示されます</textarea
+    >
+    <br />
+    <textarea id="urllistbox" style="height: 8em" readonly></textarea>
+    <script>
+      const FORMAT_LIST_JSON = {
+        "codecList": [
+          {"id": "flac", "label": "FLAC", "ext": "flac"},
+          {"id": "mp3", "label": "MP3", "ext": "mp3"},
+          {"id": "aac_lc", "label": "AAC-LC", "ext": "m4a"},
+          {"id": "aac_he_v1", "label": "HE-AAC v1", "ext": "m4a"},
+          {"id": "aac_he_v2", "label": "HE-AAC v2", "ext": "m4a"},
+          {"id": "ogg", "label": "Vorbis", "ext": "ogg"},
+          {"id": "opus", "label": "Opus", "ext": "opus"}
+        ],
+        "flac": {
+          "rcList": [
+            {"id": "vbr", "label": "VBR", "type": "k"}
+          ],
+          "vbr": [1411]
+        },
+        "mp3": {
+          "rcList": [
+            {"id": "vbr", "label": "VBR", "type": "q"},
+            {"id": "abr", "label": "ABR", "type": "k"},
+            {"id": "cbr", "label": "CBR", "type": "k"}
+          ],
+          "vbr": [
+            9, 8, 7, 6, 5, 4, 3, 2, 1, 0
+          ],
+          "abr": [
+            32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256, 320
+          ],
+          "cbr": [
+            32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256, 320
+          ]
+        },
+        "aac_lc": {
+          "rcList": [
+            {"id": "tvbr", "label": "VBR", "type": "q"},
+            {"id": "cvbr", "label": "CVBR", "type": "k"},
+            {"id": "abr", "label": "ABR", "type": "k"},
+            {"id": "cbr", "label": "CBR", "type": "k"},
+          ],
+          "tvbr": [
+            0, 9, 18, 27, 36, 45, 54, 64, 73, 82, 91, 100, 109, 118, 127
+          ],
+          "cvbr": [
+            64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
+          ],
+          "abr": [
+            64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
+          ],
+          "cbr": [
+            64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
+          ]
+        },
+        "aac_he_v1": {
+          "rcList": [
+            {"id": "cvbr", "label": "CVBR", "type": "k"},
+            {"id": "abr", "label": "ABR", "type": "k"},
+            {"id": "cbr", "label": "CBR", "type": "k"}
+          ],
+          "cvbr": [
+            32, 40, 48, 56, 64, 80
+          ],
+          "abr": [
+            32, 40, 48, 56, 64, 80
+          ],
+          "cbr": [
+            32, 40, 48, 56, 64, 80
+          ]
+        },
+        "aac_he_v2": {
+          "rcList": [
+            {"id": "vbr", "label": "VBR", "type": "q"},
+            {"id": "cbr", "label": "CBR", "type": "k"}
+          ],
+          "vbr": [
+            1, 2, 3, 4, 5
+          ],
+          "cbr": [
+            8, 16, 24, 32, 40, 48, 56, 64, 80
+          ]
+        },
+        "ogg": {
+          "rcList": [
+            {"id": "vbr", "label": "VBR", "type": "q"},
+            {"id": "abr", "label": "ABR", "type": "k"},
+            {"id": "cbr", "label": "CBR", "type": "k"}
+          ],
+          "vbr": [
+            -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
+          ],
+          "abr": [
+            32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
+          ],
+          "cbr": [
+            32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
+          ]
+        },
+        "opus": {
+          "rcList": [
+            {"id": "vbr", "label": "VBR", "type": "k"},
+            {"id": "cvbr", "label": "CVBR", "type": "k"},
+            {"id": "cbr", "label": "CBR", "type": "k"}
+          ],
+          "vbr": [
+            8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
+          ],
+          "cvbr": [
+            8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
+          ],
+          "cbr": [
+            8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 192, 224, 256, 288, 320
+          ]
+        }
+      }
+      const DEFAULT_SELECTED = [
+        {
+          "codec": "flac",
+          "rc": "vbr",
+          "bitrate": 1411,
+        },
+        {
+          "codec": "mp3",
+          "rc": "abr",
+          "bitrate": 128,
+        }
+      ];
+      function logger(text) {
+        document.getElementById("textbox").value += "\r\n" + text; // 新しい行に文字列を追加する
+      }
+      // 以下のスクリプトはBing(ChatGPT)が生成したものに追記したものです。
+      // プロンプト:
+      // ある曲のカラオケバージョンの音源と、3人分のボーカルの音源があります。つまり、4つの音声ファイルがあります。これらのファイルを完全に同期して同時再生するコードを、Howler.jsを使用した上でHTMLとJavaScriptで書いてください。
+      var howls = [];
+      // 同期再生用の関数を定義
+      function playSync() {
+        stopAll();
+        var liveID = document.getElementById("liveIDBox").value;
+        var charaID = [
+          document.getElementById("charaIDBox1").value,
+          document.getElementById("charaIDBox2").value,
+          document.getElementById("charaIDBox3").value,
+        ];
+        var okeVol = document.getElementById("okeVolBox").value;
+        var charaVol1 = document.getElementById("charaVolBox1").value;
+        var charaVol2 = document.getElementById("charaVolBox2").value;
+        var charaPan = document.getElementById("charaPanBox").value;
+        // 音声ファイルのパスを配列に格納
+        var audioFiles = [
+          `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`,
+          `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`,
+          `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`,
+          `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`,
+        ];
+        logger("playSync関数が呼び出されました");
+        logger(`liveIDは${liveID}です`);
+        // logger(`liveIDのtext_dataは${master_db_text_data_search(16, liveID).text}です`);
+        for (let i = 0; i < charaID.length; i++) {
+          logger(`charaIDは${charaID[i]}です: id=${i + 1}`);
+        }
+        document.getElementById("urllistbox").value = "";
+        remote_file_head_test(audioFiles).then((statusList) => {
+          if (statusList.every((status) => status === 200)) {
+            for (let i = 0; i < statusList.length; i++) {
+              logger(`リモートファイルへHEADしました: id=${i}, status=${statusList[i]}`);
+            };
+            logger(`リモートファイルは正常です`);
+            // 配列の要素数だけ繰り返す
+            for (let i = 0; i < audioFiles.length; i++) {
+              // Howlオブジェクトを作成して配列に追加
+              howls[i] = new Howl({
+                src: audioFiles[i], // 音声ファイルのパス
+                preload: true, // 読み込み完了まで待つかどうか
+                autoplay: false, // 自動再生するかどうか
+                loop: true, // ループ再生するかどうか
+              });
+              logger(`Howlオブジェクトを作成しました: id=${i}`);
+            }
+            // 全ての音声ファイルが読み込まれたら実行する関数を設定
+            var loadedCount = 0; // 読み込まれた音声ファイルの数
+            var onLoad = function () {
+              loadedCount++; // 読み込まれた数を増やす
+              logger(
+                `音声ファイルがプリロードされました: id=${loadedCount - 1}`
+              );
+              document.getElementById("urllistbox").value +=
+                audioFiles[loadedCount - 1].match(/([^\/?#]+)(?=[^\/]*$)/)[0] +
+                "\r\n";
+              if (loadedCount == audioFiles.length) {
+                // 全て読み込まれたら
+                howls[0].volume(okeVol);
+                logger(
+                  `Howlオブジェクトのvolumeを変更しました: id=0, value=${okeVol}`
+                );
+                for (let j = 2; j <= 3; j++) {
+                  howls[j].volume(charaVol2); // ボーカルの音源3つ（インデックス1から3）の音量を設定（追加したコード）
+                  logger(
+                    `Howlオブジェクトのvolumeを変更しました: id=${j}, value=${charaVol2}`
+                  );
+                }
+                howls[1].volume(charaVol1);
+                logger(
+                  `Howlオブジェクトのvolumeを変更しました: id=1, value=${charaVol1}`
+                );
+                howls[2].stereo(0 - charaPan); // 特定のボーカルだけ左チャンネルに寄せる（追加したコード）
+                logger(
+                  `Howlオブジェクトのstereoを変更しました: id=2, value=${
+                    0 - charaPan
+                  }`
+                );
+                howls[3].stereo(charaPan); // 特定のボーカルだけ右チャンネルに寄せる（追加したコード）
+                logger(
+                  `Howlオブジェクトのstereoを変更しました: id=3, value=${charaPan}`
+                );
+                for (let j = 0; j < howls.length; j++) {
+                  // 配列の要素数だけ繰り返す
+                  howls[j].play(); // 再生する（Howlオブジェクトは自動的に同期される）
+                  logger(`Howlオブジェクトを再生しました: id=${j}`);
+                }
+              }
+            };
+            for (let k = 0; k < howls.length; k++) {
+              // 配列の要素数だけ繰り返す
+              howls[k].once("load", onLoad); // 読み込み完了時にonLoad関数を実行するように設定
+            }
+          } else {
+            for (let i = 0; i < statusList.length; i++) {
+              logger(`リモートファイルへHEADしました: id=${i}, status=${statusList[i]}`);
+            }
+            logger(`リモートファイルの一部に問題があります`);
+          }
+        });
+      }
+      // 再生停止用の関数を定義（追加したコード）
+      function stopAll() {
+        for (var n = 0; n < howls.length; n++) {
+          // 配列の要素数だけ繰り返す
+          howls[n].stop(); // 停止する
+          howls[n].unload();
+        }
+        document.getElementById("textbox").value =
+          "Logger出力はここに表示されます";
+        logger(`stopAll関数が呼び出されました`);
+      }
+      function master_db_text_data_search(categoryNumber, idNumber) {
+        fetch(
+          "https://cdn.jsdelivr.net/gh/daydreamer-json/umm_master_db@main/json/text_data.json"
+        )
+          .then((response) => response.json())
+          .then((data) => {
+            var master_db_text_data = data;
+            logger(`マスターデータベースを読み込みました`);
+            let categoryResult = master_db_text_data.filter(function (obj) {
+              return obj.category === categoryNumber;
+            });
+            let integratedResult = categoryResult.filter(function (obj) {
+              return obj.id === idNumber;
+            });
+            return integratedResult[0];
+          })
+          .catch((error) => {
+            console.error(error);
+            return null;
+          });
+      }
+      async function remote_file_head_test(audioFilesList) {
+        const promises = audioFilesList.map((url) =>
+          fetch(url, { method: "HEAD" })
+        );
+        const responses = await Promise.all(promises);
+        return responses.map((response) => response.status);
+      }
+      document.addEventListener('DOMContentLoaded',function() {
+        for (let i = 0; i < FORMAT_LIST_JSON.length; i++) {
+          var temp_codecSelectBox1 = document.getElementById('codecSelectBox1');
+          var temp_codecSelectBox1_inOption = document.createElement('option');
+          temp_codecSelectBox1_inOption.value = FORMAT_LIST_JSON.codecList[i].id;
+          temp_codecSelectBox1_inOption.text = FORMAT_LIST_JSON.codecList[i].label;
+          if (FORMAT_LIST_JSON.codecList[i].id === DEFAULT_SELECTED[0].codec) {
+            temp_codecSelectBox1_inOption.selected = true;
+          }
+          temp_codecSelectBox1.appendChild(temp_codecSelectBox1_inOption);
+        }
+        for (let i = 0; i < FORMAT_LIST_JSON.length; i++) {
+          var temp_codecSelectBox2 = document.getElementById('codecSelectBox2');
+          var temp_codecSelectBox2_inOption = document.createElement('option');
+          temp_codecSelectBox2_inOption.value = FORMAT_LIST_JSON.codecList[i].id;
+          temp_codecSelectBox2_inOption.text = FORMAT_LIST_JSON.codecList[i].label;
+          if (FORMAT_LIST_JSON.codecList[i].id === DEFAULT_SELECTED[1].codec) {
+            temp_codecSelectBox2_inOption.selected = true;
+          }
+          temp_codecSelectBox2.appendChild(temp_codecSelectBox2_inOption);
+        }
+      });
+      function refreshRcSelectBox() {
+        var temp_codecSelectBox1_selected_index = document.getElementById('codecSelectBox1').selectedIndex;
+        var temp_codecSelectBox2_selected_index = document.getElementById('codecSelectBox2').selectedIndex;
+        var temp_codecSelectBox1_selected_option = document.getElementById('codecSelectBox1').options[temp_codecSelectBox1_selected_index];
+        var temp_codecSelectBox2_selected_option = document.getElementById('codecSelectBox2').options[temp_codecSelectBox2_selected_index];
+        for (let i = 0; i < FORMAT_LIST_JSON[temp_codecSelectBox1_selected_option.value].rcList.length; i++) {
+          var temp_rcSelectBox1 = document.getElementById('rcSelectBox1');
+          var temp_rcSelectBox1_inOption = document.createElement('option');
+          temp_rcSelectBox1_inOption.value = FORMAT_LIST_JSON[temp_codecSelectBox1_selected_option.value].rcList[i].id;
+          temp_rcSelectBox1_inOption.text = FORMAT_LIST_JSON[temp_codecSelectBox1_selected_option.value].rcList[i].label;
+          if (FORMAT_LIST_JSON[temp_codecSelectBox1_selected_option.value].rcList[i].id === DEFAULT_SELECTED[0].rc) {
+            temp_rcSelectBox1_inOption.selected = true;
+          }
+          temp_rcSelectBox1.appendChild(temp_rcSelectBox1_inOption);
+        }
+        for (let i = 0; i < FORMAT_LIST_JSON[temp_codecSelectBox2_selected_option.value].rcList.length; i++) {
+          var temp_rcSelectBox2 = document.getElementById('rcSelectBox2');
+          var temp_rcSelectBox2_inOption = document.createElement('option');
+          temp_rcSelectBox2_inOption.value = FORMAT_LIST_JSON[temp_codecSelectBox2_selected_option.value].rcList[i].id;
+          temp_rcSelectBox2_inOption.text = FORMAT_LIST_JSON[temp_codecSelectBox2_selected_option.value].rcList[i].label;
+          if (FORMAT_LIST_JSON[temp_codecSelectBox2_selected_option.value].rcList[i].id === DEFAULT_SELECTED[1].rc) {
+            temp_rcSelectBox2_inOption.selected = true;
+          }
+          temp_rcSelectBox2.appendChild(temp_rcSelectBox2_inOption);
+        }
+      }
+    </script>
+  </body>
+</html>