Spaces:

daydreamer-json
/

hp

Running

App Files Files Community

daydreamer-json commited on Mar 12, 2023

Commit

97c44ca

verified ·

1 Parent(s): f5b2b6d

Add umm_audiosync_test

Browse files

Files changed (2) hide show

gi_jukebox_copy.html +268 -0
umm_audiosync_test.html +279 -0

gi_jukebox_copy.html ADDED Viewed

	@@ -0,0 +1,268 @@

+<!DOCTYPE html>
+<html lang='en'>
+<head>
+  <title>N/A</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://cdn.plyr.io/3.7.3/plyr.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
+  <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>
+  html, body {
+    color: #fff;
+    background: #000;
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+    width: 100vw;
+    height: 100vh;
+    font-family: 'SDK_JP_Web', system-ui;
+  }
+  #h2string1, #h2string2 {
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+  }
+  #main {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    white-space: normal;
+    letter-spacing: -0.02em;
+    text-shadow: 0 0 30px #cccccc;
+    z-index: 100;
+  }
+  #cover_bg_container {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+  #cover_bg {
+    z-index: 95;
+    width: 100vw;
+    height: 100vh;
+    opacity: 0.3;
+    object-fit: cover;
+    object-position: 50% 50%;
+  }
+  #trackInfoContainer {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    white-space: normal;
+    letter-spacing: -0.02em;
+    text-shadow: 0 0 30px #cccccc;
+    z-index: 150;
+  }
+  #trackInfoBgMask {
+    width: 100vw;
+    height: 100vh;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    white-space: normal;
+    letter-spacing: -0.02em;
+    background: rgba(0, 0, 0, 0.01);
+    backdrop-filter: blur(20px);
+    z-index: 149;
+  }
+  .do-not-select {
+    user-select: none;
+  }
+  .do-not-bold {
+    font-weight: normal;
+  }
+  </style>
+</head>
+<body>
+  <div id='cover_bg_container'>
+    <img id='cover_bg' src='' style='display: none;'>
+  </div>
+  <div id='main'>
+    <h2 id='h2string1' class='do-not-select do-not-bold'>&nbsp;</h1>
+    <h1 id='h1string1' class='do-not-select do-not-bold'>&nbsp;</h1>
+    <div id='trackInfo' class='do-not-select'>
+      <h3 id='trackInfo_trackName' class='do-not-bold' style='display: none;'>&nbsp;</h3>
+      <h4 id='trackInfo_albumName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
+      <h4 id='trackInfo_artistName' class='do-not-bold' style='display: none;'>&nbsp;</h4>
+      <p id='trackInfo_copyright' style='display: none;'>&nbsp;</p>
+    </div>
+  </div>
+  <div id='trackInfoBgMask'><p>&nbsp;</p></div>
+  <div id='trackInfoContainer' class='do-not-select'>
+    <h2 id='h2string2' class='do-not-select do-not-bold'>Album External Links</h2>
+    <p><a href=''>Apple Music</a></p>
+    <p><a href=''>Spotify</a></p>
+    <p><a href=''>VGMdb</a></p>
+    <p><a href=''>MusicBrainz</a></p>
+  </div>
+  <script>
+  let BASE_SETTINGS = {
+    base64var: {
+      pageTitle: 'R2Vuc2hpbiBJbXBhY3QgTXVzaWMgSnVrZWJveA==',
+      h2string1: 'R2Vuc2hpbiBJbXBhY3QgTXVzaWMgSnVrZWJveA=='
+    },
+    audioRootURL: 'https://raw.githubusercontent.com/daydreamer-json/discography_cdn_005/main/mhy/genshin',
+    playStartButtonText_init_pc: 'CLICK TO PLAY',
+    playStartButtonText_init_mobile: 'TAP TO PLAY',
+    playStartButtonText_loading: 'LOADING ...',
+    playStartButtonText_playing: 'NOW PLAYING',
+    trackInfoLabel_loading: 'Loading ...',
+    forceCompressedFormat: true
+  };
+  function detectMobileDevice() {
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      return 'mobile'
+    } else {
+      return 'pc'
+    }
+  }
+  function display_deobfuscate() {
+    document.title = atob(BASE_SETTINGS.base64var.pageTitle);
+    document.getElementById('h2string1').textContent = atob(BASE_SETTINGS.base64var.h2string1);
+  }
+  function randomTrackSelector(db) {
+    let randomizedAlbumIndex = Math.floor(Math.random() * db.list.length);
+    let randomizedDiscIndex = Math.floor(Math.random() * db.list[randomizedAlbumIndex].discs.length);
+    let randomizedTrackIndex = Math.floor(Math.random() * db.list[randomizedAlbumIndex].discs[randomizedDiscIndex].tracks.length);
+    return {
+      albumIndex: randomizedAlbumIndex,
+      discIndex: randomizedDiscIndex,
+      trackIndex: randomizedTrackIndex
+    };
+  }
+  function playAudioURLBuilder(db, randomTrackSelectorOutput) {
+    let deviceType = detectMobileDevice();
+    /*
+    let bpsArray = new Array();
+    for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length; i++) {
+      bpsArray.push(db.list[randomTrackSelectorOutput.albumIndex].availableFmts[i].bps);
+    };
+    bpsArray.sort((a, b) => b - a);
+    */
+    let formatPath = '';
+    let formatExt = '';
+    if (BASE_SETTINGS.forceCompressedFormat) {
+      formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
+      formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
+    } else if (deviceType == 'pc') {
+      formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].path;
+      formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[0].ext;
+    } else if (deviceType == 'mobile') {
+      formatPath = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].path;
+      formatExt = db.list[randomTrackSelectorOutput.albumIndex].availableFmts[db.list[randomTrackSelectorOutput.albumIndex].availableFmts.length - 1].ext;
+    }
+    let trackTotal = 0;
+    let trackCountArray = new Array();
+    for (let i = 0; i < db.list[randomTrackSelectorOutput.albumIndex].discs.length; i++) {
+      trackTotal += db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length;
+      trackCountArray.push(db.list[randomTrackSelectorOutput.albumIndex].discs[i].tracks.length);
+    };
+    let selectedTrackNum = 0;
+    if (randomTrackSelectorOutput.discIndex == 0) {
+      selectedTrackNum = randomTrackSelectorOutput.trackIndex + 1;
+    } else {
+      let E7BF25ECDBAAF938 = 0;
+      for (let i = 0; i < randomTrackSelectorOutput.discIndex; i++) {
+        E7BF25ECDBAAF938 += trackCountArray[i];
+      }
+      selectedTrackNum = E7BF25ECDBAAF938 + randomTrackSelectorOutput.trackIndex + 1;
+    }
+    let selectedTrackNumStr = '';
+    if (trackTotal >= 100) {
+      selectedTrackNumStr = selectedTrackNum.toString().padStart(3, '0');
+    } else if (trackTotal < 100) {
+      selectedTrackNumStr = selectedTrackNum.toString().padStart(2, '0');
+    }
+    let filename = encodeURIComponent(db.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'].replace(/'/g, '_'));
+    let buildedURL = `${BASE_SETTINGS.audioRootURL}/${db.list[randomTrackSelectorOutput.albumIndex].rootPath}/${formatPath}/${selectedTrackNumStr}_${filename}.${formatExt}`;
+    return buildedURL;
+  }
+  function playAudio() {
+    document.getElementById('h1string1').removeEventListener('click', playAudio);
+    if (typeof audioPlayer !== 'undefined') {
+      audioPlayer.unload();
+    };
+    fetch(`${BASE_SETTINGS.audioRootURL}/db.json`)
+      .then(response => response.json())
+      .then(data => {
+        console.log('Database loaded successfully');
+        const FILE_DATABASE = data;
+        let deviceType = detectMobileDevice();
+        let randomTrackSelectorOutput = randomTrackSelector(FILE_DATABASE);
+        var audioPlayer = new Howl ({
+          src: [playAudioURLBuilder(FILE_DATABASE, randomTrackSelectorOutput)],
+          html5: true
+        });
+        window.audioPlayer = audioPlayer;
+        document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_loading;
+        document.getElementById('trackInfo_trackName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
+        document.getElementById('trackInfo_albumName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
+        document.getElementById('trackInfo_artistName').textContent = BASE_SETTINGS.trackInfoLabel_loading;
+        document.getElementById('trackInfo_copyright').textContent = BASE_SETTINGS.trackInfoLabel_loading;
+        audioPlayer.on('loaderror', function(){
+          console.error('Audio "loaderror" has occured. Retrying ...');
+          playAudio();
+        });
+        audioPlayer.on('playerror', function(){
+          console.error('Audio "playerror" has occured. Retrying ...');
+          playAudio();
+        });
+        audioPlayer.on('load', function(){
+          audioPlayer.play();
+          document.getElementById('h1string1').addEventListener('click', playAudio);
+          document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_playing;
+          console.log(`Now playing "${FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US']}"`);
+          console.log(`URL: ${audioPlayer._src}`);
+          document.getElementById('trackInfo_trackName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].discs[randomTrackSelectorOutput.discIndex].tracks[randomTrackSelectorOutput.trackIndex].trackName['en-US'];
+          document.getElementById('trackInfo_albumName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumTitle;
+          document.getElementById('trackInfo_artistName').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].albumArtist;
+          document.getElementById('trackInfo_copyright').textContent = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].copyright;
+          document.getElementById('cover_bg').src = FILE_DATABASE.list[randomTrackSelectorOutput.albumIndex].coverExtLink;
+          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') {
+            document.getElementById('trackInfo_trackName').style.display = 'block';
+            document.getElementById('trackInfo_albumName').style.display = 'block';
+            document.getElementById('trackInfo_artistName').style.display = 'block';
+            document.getElementById('trackInfo_copyright').style.display = 'block';
+            document.getElementById('cover_bg').style.display = 'block';
+          }
+          audioPlayer.on('end', playAudio);
+        });
+      })
+      .catch(error => {
+        console.error(error);
+        alert('Failed to load database file');
+      });
+  }
+  document.addEventListener('DOMContentLoaded', function() {
+    display_deobfuscate();
+    let deviceType = detectMobileDevice();
+    if (deviceType == 'pc') {
+      document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_pc;
+    } else if (deviceType == 'mobile') {
+      document.getElementById('h1string1').textContent = BASE_SETTINGS.playStartButtonText_init_mobile;
+    };
+    var audioPlayer = new Howl ({
+      src: ['https://archive.org/download/audio-silent-wavs-one-second-half-second-quarter-second/silent_quarter-second.mp3']
+    });
+    window.audioPlayer = audioPlayer;
+  });
+  window.onload = function () {
+    document.getElementById('h1string1').addEventListener('click', playAudio);
+  }
+  </script>
+</body>
+</html>

umm_audiosync_test.html ADDED Viewed

	@@ -0,0 +1,279 @@

+<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,[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>
+      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>
+    <script>
+      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 = "";
+        for (let i = 0; i < audioFiles.length; i++) {
+          remote_file_head_test(audioFiles[i], i);
+        }
+        // 配列の要素数だけ繰り返す
+        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関数を実行するように設定
+        }
+      }
+      // 再生停止用の関数を定義（追加したコード）
+      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;
+          });
+      }
+      function remote_file_head_test(url, id) {
+        fetch(url, { method: "HEAD" })
+          .then((response) => {
+            logger(
+              `リモートファイルへHEADしました: id=${id}, status=${response.status}`
+            );
+          })
+          .catch((error) => {
+            console.error(error);
+          });
+      }
+    </script>
+  </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"
+    />
+    <input
+      class="inputbox"
+      id="charaIDBox1"
+      type="number"
+      inputmode="numeric"
+      required
+      min="1001"
+      max="9999"
+      value="1001"
+    />
+    <input
+      class="inputbox"
+      id="charaIDBox2"
+      type="number"
+      inputmode="numeric"
+      required
+      min="1001"
+      max="9999"
+      value="1002"
+    />
+    <input
+      class="inputbox"
+      id="charaIDBox3"
+      type="number"
+      inputmode="numeric"
+      required
+      min="1001"
+      max="9999"
+      value="1003"
+    />
+    <br />
+    <input
+      class="inputbox"
+      id="okeVolBox"
+      type="number"
+      inputmode="decimal"
+      required
+      min="0"
+      max="1"
+      value="1"
+    />
+    <input
+      class="inputbox"
+      id="charaVolBox1"
+      type="number"
+      inputmode="decimal"
+      required
+      min="0"
+      max="1"
+      value="0.8"
+    />
+    <input
+      class="inputbox"
+      id="charaVolBox2"
+      type="number"
+      inputmode="decimal"
+      required
+      min="0"
+      max="1"
+      value="0.6"
+    />
+    <input
+      class="inputbox"
+      id="charaPanBox"
+      type="number"
+      inputmode="decimal"
+      required
+      min="0"
+      max="1"
+      value="0.35"
+    />
+    <br />
+    <textarea id="textbox" style="height: 400px" readonly>Logger出力はここに表示されます</textarea>
+    <br />
+    <textarea id="urllistbox" style="height: 8em" readonly></textarea>
+  </body>
+</html>