編集履歴

質問編集履歴

ご回答を参考に、アプリを修正しました。以前のせていたHTMLのテキストを見ることができるリンクを追加しました。

2025/03/04 14:29

投稿

KAN-KOFUN

スコア18

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -16,36 +16,15 @@
 t.mp3 → テノール音源
 ### 該当のソースコード
+かなり省略しています。
 ```HTML
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="robots" content="noindex" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>「…」パート選択式プレイヤー</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
-    <style>
-        /* 省略 */
-    </style>
-</head>
-<body>
-<div class="container">
-    <h1>…</h1>
-    <p class="title">合唱･作曲</p>
+    <button id="play">再生</button>
-    <button id="toggle-mode"><span class="material-symbols-outlined">brightness_6</span> テーマ切替</button>
-    <button onclick="helpDisplay()"><span class="material-symbols-outlined">sticky_note_2</span> 使い方</button><br>
-    <button id="play"><span class="material-symbols-outlined">play_arrow</span> 再生</button>
-    <button id="stop"><span class="material-symbols-outlined">stop</span> 停止</button><br>
+    <button id="stop">てい止</button><br>
     <label><input type="checkbox" id="repeat">リピート</label>
     <h3>再生パート選択</h3>
-    <label><input type="checkbox" id="cb1" checked>~ measure 12 Alto</label>
-    <label><input type="checkbox" id="cbs" checked>ソプラノ</label><br>
+    <label><input type="checkbox" id="cb1" checked>4~12 Alt.</label>・・・（すべてのパート）
-    <label><input type="checkbox" id="cba" checked>アルト</label>
-    <label><input type="checkbox" id="cbt" checked>テノール</label>
     <h3>音量</h3>
     <div class="slider-container">
@@ -60,193 +39,256 @@
     </div>
 </div>
-<audio id="p" src="p.mp3"></audio>
+<audio id="p" src="p.mp3"></audio>…（すべてのMP3）
-<audio id="all" src="all.mp3"></audio>
-<audio id="1" src="1.mp3"></audio>
-<audio id="s" src="s.mp3"></audio>
-<audio id="a" src="a.mp3"></audio>
-<audio id="t" src="t.mp3"></audio>
 <script>
+document.addEventListener("DOMContentLoaded", function() {
+  // グローバル変数
+  let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  let gainNode = audioCtx.createGain();
+  gainNode.connect(audioCtx.destination);
+  // 初期音量をスライダーに合わせる
+  gainNode.gain.value = document.getElementById("volume").value / 100;
+  // 各ファイルのパスマッピング
-    const audioFiles = {
+  const fileList = {
-        p: document.getElementById("p"),
+    "p": "p.mp3",…（すべてのMP3）
-        all: document.getElementById("all"),
-        1: document.getElementById("1"),
-        s: document.getElementById("s"),
-        a: document.getElementById("a"),
-        t: document.getElementById("t"),
-    };
+  };
+  // デコード済みAudioBufferを格納する辞書
-    const checkboxes = {
+  const buffers = {};
-        1: document.getElementById("cb1"),
+  let filesToLoad = Object.keys(fileList).length;
-        s: document.getElementById("cbs"),
+  let errorOccurred = false;
-        a: document.getElementById("cba"),
+  const loadDiv = document.getElementById("load");
-        t: document.getElementById("cbt"),
+  loadDiv.style.display = "block";
+  // ファイルを読み込み、デコードする関数
+  function loadBuffer(key, url) {
+    return fetch(url)
+      .then(response => {
+        if (!response.ok) throw new Error("Network response was not ok");
+        return response.arrayBuffer();
-    };
+      })
+      .then(arrayBuffer => audioCtx.decodeAudioData(arrayBuffer))
-    let playing = false;
+      .then(audioBuffer => {
-    let selectedAudios = [];
+        buffers[key] = audioBuffer;
-    document.getElementById("play").addEventListener("click", togglePlayPause);
-    document.getElementById("stop").addEventListener("click", stopAudio);
-    document.getElementById("repeat").addEventListener("change", updateRepeat);
-    document.getElementById("volume").addEventListener("input", adjustVolume);
-    document.getElementById("seek").addEventListener("input", seekAudio);
-    document.getElementById("toggle-mode").addEventListener("click", toggleMode);
-    Object.values(checkboxes).forEach(cb => cb.addEventListener("change", updateAudioSelection));
-    function updateAudioSelection() {
-        stopAudio();
-        playAudio();
-    }
-    function togglePlayPause() {
-        if (playing) {
-            pauseAudio();
+        filesToLoad--;
-        } else {
+        if (filesToLoad === 0 && !errorOccurred) {
-            playAudio();
+          loadDiv.style.display = "none";
+          console.log("全オーディオファイルの読み込み完了 (Web Audio API)");
         }
+      })
+      .catch(err => {
+        errorOccurred = true;
+        loadDiv.style.display = "none";
+        alert("オーディオファイルの読み込みに失敗しました: " + url);
+      });
-    }
+  }
+  Object.keys(fileList).forEach(key => {
+    loadBuffer(key, fileList[key]);
+  });
+  // 再生状態管理用グローバル変数
+  let isPlaying = false;
+  let playStartTime = 0; // 再生開始時のaudioCtx.currentTime
+  let pauseOffset = 0;   // 再生済みの秒数（再生中止時に蓄積）
+  let activeSources = []; // 現在再生中のAudioBufferSourceNode群
+  let selectedTrackIds = []; // チェックボックスから選択された音源IDの配列
+  let trackDuration = 0;     // 選択したトラックの再生時間（最大値）
+  // チェックボックスの状態により再生する音源を決定
-    function playAudio() {
+  function updateSelectedTracks() {
+    // チェック対象：cb1,cb2,cb3,cb4, cbs, cba, cbt
+    const checkboxIds = ["cb1", "cb2", "cb3", "cb4", "cbs", "cba", "cbt"];
+    let allChecked = true;
-        selectedAudios = [audioFiles.p];
+    checkboxIds.forEach(id => {
-        if (Object.values(checkboxes).every(cb => cb.checked)) {
+      if (!document.getElementById(id).checked) {
+        allChecked = false;
+      }
+    });
+    if (allChecked) {
-            selectedAudios = [audioFiles.all];
+      selectedTrackIds = ["all"];
-        } else {
+    } else {
+      // 常に「p」を追加
+      let tracks = ["p"];
+      const mapping = {
+        "cb1": "1",
+        "cb2": "2",
+        "cb3": "3",
+        "cb4": "4",
+        "cbs": "s",
+        "cba": "a",
+        "cbt": "t"
+      };
-            Object.keys(checkboxes).forEach(key => {
+      Object.keys(mapping).forEach(cbId => {
-                if (checkboxes[key].checked) {
+        if (document.getElementById(cbId).checked) {
-                    selectedAudios.push(audioFiles[key]);
+          tracks.push(mapping[cbId]);
-                }
-            });
         }
-        selectedAudios.forEach(audio => {
-            audio.currentTime = document.getElementById("seek").value;
-            audio.play();
-            audio.loop = document.getElementById("repeat").checked;
-        });
-        playing = true;
-        document.getElementById("play").innerHTML = "<span class=\"material-symbols-outlined\">pause</span> 一時停止";
-        document.getElementById("stop").style.display = "inline";
-        updateSeekBar();
-    }
-    function pauseAudio() {
-        selectedAudios.forEach(audio => audio.pause());
-        playing = false;
-        document.getElementById("play").innerHTML = "<span class=\"material-symbols-outlined\">play_arrow</span> 再生";
-    }
-    function stopAudio() {
-        Object.values(audioFiles).forEach(audio => {
-            audio.pause();
-            audio.currentTime = 0;
-        });
-        playing = false;
-        document.getElementById("play").innerHTML = "<span class=\"material-symbols-outlined\">play_arrow</span> 再生";
-        document.getElementById("stop").style.display = "none";
-    }
-    function updateRepeat() {
-        selectedAudios.forEach(audio => audio.loop = document.getElementById("repeat").checked);
-    }
-function adjustVolume() {
-    let volume = document.getElementById("volume").value / 100; // スライダーの値を0から1の範囲に変換
-    document.getElementById("volume-text").textContent = `${Math.round(volume * 100)}%`;
-    Object.values(audioFiles).forEach(audio => audio.volume = volume);
-}
-    function seekAudio() {
-        let seekValue = document.getElementById("seek").value;
-        selectedAudios.forEach(audio => audio.currentTime = seekValue);
-        updateSeekBar();
-    }
-    function updateSeekBar() {
-        let maxDuration = Math.max(...selectedAudios.map(a => a.duration || 0));
-        let currentTime = Math.max(...selectedAudios.map(a => a.currentTime || 0));
-        document.getElementById("seek").max = maxDuration;
-        document.getElementById("seek").value = currentTime;
-        document.getElementById("time-text").textContent = `${formatTime(currentTime)} / ${formatTime(maxDuration)}`;
-        if (playing) requestAnimationFrame(updateSeekBar);
-    }
-    function formatTime(seconds) {
-        let min = Math.floor(seconds / 60);
-        let sec = Math.floor(seconds % 60);
-        return `${min}:${sec.toString().padStart(2, "0")}`;
-    }
-    function toggleMode() {
-        document.body.classList.toggle("dark-mode");
-    }
+      });
+      selectedTrackIds = tracks;
+    }
+  }
+  // 選択した各音源の再生を開始（pauseOffsetから再生）
+  function startPlayback() {
+    updateSelectedTracks();
+    // 再生時間の決定：全チェックの場合は「all」それ以外は各トラックの最大値
+    if (selectedTrackIds.length === 1 && selectedTrackIds[0] === "all") {
+      trackDuration = buffers["all"].duration;
+    } else {
+      trackDuration = Math.max(...selectedTrackIds.map(id => buffers[id].duration));
+    }
+    activeSources = [];
+    selectedTrackIds.forEach(id => {
+      let source = audioCtx.createBufferSource();
+      source.buffer = buffers[id];
+      source.loop = document.getElementById("repeat").checked;
+      source.connect(gainNode);
+      // ※ 各ソースにonendedを設定すると、早く終了したものが先に発火する可能性があるため、
+      // 終了判定はupdateSeekBar内で行います。
+      if (pauseOffset < source.buffer.duration) {
+        source.start(0, pauseOffset);
+      }
+      activeSources.push(source);
+    });
+    playStartTime = audioCtx.currentTime;
+    isPlaying = true;
+    document.getElementById("play").innerHTML = '<span class="material-symbols-outlined">pause</span> 一時停止';
+    document.getElementById("stop").style.display = "inline";
+    updateSeekBar();
+  }
+  // 再生／一時停止の切り替え
+  function togglePlayPause() {
+    if (!isPlaying) {
+      if (audioCtx.state === "suspended") {
+        audioCtx.resume();
+      }
+      startPlayback();
+    } else {
+      pauseAudio();
+    }
+  }
+  // 一時停止処理：現在再生中のソースを停止し、経過時間を記録
+  function pauseAudio() {
+    if (isPlaying) {
+      pauseOffset += audioCtx.currentTime - playStartTime;
+      activeSources.forEach(source => {
+        try { source.stop(); } catch(e) {}
+      });
+      activeSources = [];
+      isPlaying = false;
+      document.getElementById("play").innerHTML = '<span class="material-symbols-outlined">play_arrow</span> 再生';
+    }
+  }
+  // 停止処理：再生停止＆再生位置リセット
+  function stopAudio() {
+    if (isPlaying) {
+      activeSources.forEach(source => {
+        try { source.stop(); } catch(e) {}
+      });
+    }
+    activeSources = [];
+    isPlaying = false;
+    pauseOffset = 0;
+    document.getElementById("play").innerHTML = '<span class="material-symbols-outlined">play_arrow</span> 再生';
+    document.getElementById("stop").style.display = "none";
+    document.getElementById("seek").value = 0;
+    document.getElementById("time-text").textContent = formatTime(0) + " / " + formatTime(trackDuration);
+  }
+  // リピートチェックボックスの変更（再生中のソースに対してループ設定を反映）
+  document.getElementById("repeat").addEventListener("change", function() {
+    activeSources.forEach(source => {
+      source.loop = document.getElementById("repeat").checked;
+    });
+  });
+  // 音量調整：GainNodeのgain値を変更
+  document.getElementById("volume").addEventListener("input", function() {
+    let vol = document.getElementById("volume").value;
+    gainNode.gain.value = vol / 100;
+    document.getElementById("volume-text").textContent = vol + "%";
+  });
+  // シークバー操作：ユーザー操作時は再生中なら再スタート、停止中なら再生位置更新
+  document.getElementById("seek").addEventListener("input", function() {
+    let seekValue = parseFloat(document.getElementById("seek").value);
+    pauseOffset = seekValue;
+    if (isPlaying) {
+      activeSources.forEach(source => {
+        try { source.stop(); } catch(e) {}
+      });
+      activeSources = [];
+      playStartTime = audioCtx.currentTime;
+      startPlayback();
+    }
+    updateSeekBar();
+  });
+// チェックボックス（パート選択）の変更で再生中なら再スタート（修正版）
+const checkboxIds = ["cb1", "cb2", "cb3", "cb4", "cbs", "cba", "cbt"];
+checkboxIds.forEach(id => {
+  document.getElementById(id).addEventListener("change", function() {
+    if (isPlaying) {
+      // 現在の再生位置を計算して更新（再生位置の同期を実現）
+      let currentPosition = pauseOffset + (audioCtx.currentTime - playStartTime);
+      pauseOffset = currentPosition;
+      activeSources.forEach(source => {
+        try { source.stop(); } catch(e) {}
+      });
+      activeSources = [];
+      playStartTime = audioCtx.currentTime;
+      startPlayback();
+    }
+  });
+});
+  // シークバーの更新（再生中はrequestAnimationFrameで更新）
+  function updateSeekBar() {
+    let currentTime = isPlaying ? pauseOffset + (audioCtx.currentTime - playStartTime) : pauseOffset;
+    if (currentTime > trackDuration) {
+      currentTime = trackDuration;
+    }
+    document.getElementById("seek").max = trackDuration;
+    document.getElementById("seek").value = currentTime;
+    document.getElementById("time-text").textContent = formatTime(currentTime) + " / " + formatTime(trackDuration);
+    // リピートがOFFかつ再生が終了していたら自動停止
+    if (isPlaying && !document.getElementById("repeat").checked && currentTime >= trackDuration) {
+      stopAudio();
+      return;
+    }
+    if (isPlaying) {
+      requestAnimationFrame(updateSeekBar);
+    }
+  }
+  // 秒数を m:ss 表記に変換
+  function formatTime(seconds) {
+    let min = Math.floor(seconds / 60);
+    let sec = Math.floor(seconds % 60);
+    return min + ":" + sec.toString().padStart(2, "0");
+  }
+  // テーマ切替（ダークモード）
+  // キーボードショートカット
+（省略）
+  // 再生／停止ボタンのイベントリスナー設定
+  document.getElementById("play").addEventListener("click", togglePlayPause);
+  document.getElementById("stop").addEventListener("click", stopAudio);
+  // ページロード時の初期化（firstLoadingを短時間表示）
+（省略）
 </script>
-<script>
-document.addEventListener("keydown", function(event) {
-    let volumeSlider = document.querySelector("#volume");
-    let seekSlider = document.querySelector("#seek");
-    let playButton = document.querySelector("#play");
-    let stopButton = document.querySelector("#stop");
-    switch (event.key) {
-        case " ":
-        case "p":
-        case "P":
-            if (playButton) playButton.click();
-            event.preventDefault(); // スペースキーのスクロールを防ぐ
-            break;
-        case "s":
-        case "S":
-            if (stopButton) stopButton.click();
-            break;
-        case "ArrowUp":
-            if (volumeSlider) {
-                let max = parseInt(volumeSlider.max) || 100;
-                volumeSlider.value = Math.min(parseInt(volumeSlider.value) + 1, max);
-                volumeSlider.dispatchEvent(new Event("input"));
-            }
-            break;
-        case "ArrowDown":
-            if (volumeSlider) {
-                volumeSlider.value = Math.max(parseInt(volumeSlider.value) - 1, 0);
-                volumeSlider.dispatchEvent(new Event("input"));
-            }
-            break;
-        case "ArrowRight":
-            if (seekSlider) {
-                let max = parseInt(seekSlider.max) || 360;
-                seekSlider.value = Math.min(parseInt(seekSlider.value) + 1, max);
-                seekSlider.dispatchEvent(new Event("input"));
-            }
-            break;
-        case "ArrowLeft":
-            if (seekSlider) {
-                seekSlider.value = Math.max(parseInt(seekSlider.value) - 1, 0);
-                seekSlider.dispatchEvent(new Event("input"));
-            }
-            break;
-    }
-});
-function helpDisplay() {
-    alert(
-        "パート選択式プレイヤー　使い方\n" +
-        "\n◆ショートカットキー\n" +
-        "・再生／一時停止 → スペースキーまたはＰキー\n" +
-        "・停止 → Ｓキー\n・音量上下 → 上下矢印キー" +
-        "\n・再生位置変更 → 左右矢印キー\n" +
-        "\n◆注意事項\n" +
-        "・ご利用の機器の処理能力やインターネット速度などによりパートがずれることがあります。ずれた場合はページを再読み込みして再度お試しください。\n" +
-        "・パートのずれを防止するため、リピート機能は使用せず、再生１回ごとにページを再読み込みすることをお勧めします。\n" +
-        "・初期状態で再生位置の操作を行うとスライダーの表示が乱れますが、再生ボタンを押すと50秒地点から再生されます。"
-    );
-}
-</script>
-</body>
-</html>
 ```
+[質問投稿時のときのHTML](https://writening.net/page?pXDfwP)
 よろしくお願いいたします。

HTML5 JavaScript HTML