パート別再生アプリで音源がずれることがある

Question

実現したいこと

このアプリにおいて、以下の問題を解決したいです。

• パートがずれることがある問題（すべての音源の再生位置を同期させたい）
• 初期状態で再生位置の操作を行うと表示が乱れる問題（スライダーの位置からできるようにする）
• （リピートオフ時）再生終了後に一時停止ボタンが再生ボタンに戻らない、再生位置が0に戻らない問題

アプリの概要

合唱の音源を再生するアプリです。パート（ソプラノ・アルト・テノール）ごとに鳴らす鳴らさないを切り替えできます。すべてのパートが鳴っているときは、全体の音源を流します。
p.mp3 → ピアノ音源（all再生中以外は再生）
all.mp3 → すべてのパートの音源（すべて選択されているときはこれだけ再生）
1.mp3 → Alto音源
s.mp3 → ソプラノ音源
a.mp3 → アルト音源
t.mp3 → テノール音源

該当のソースコード

かなり省略しています。

    <button id="play">再生</button>
    <button id="stop">てい止</button><br>
    <label><input type="checkbox" id="repeat">リピート</label>

    <h3>再生パート選択</h3>
    <label><input type="checkbox" id="cb1" checked>4~12 Alt.</label>・・・（すべてのパート）

    <h3>音量</h3>
    <div class="slider-container">
        <span id="volume-text">100%</span>
        <input type="range" id="volume" min="0" max="100" step="1" value="100">
    </div>

    <h3>再生位置</h3>
    <div class="slider-container">
        <span id="time-text">0:00 / 0:00</span>
        <input type="range" id="seek" min="0" max="100" step="1" value="0">
    </div>
</div>

<audio id="p" src="p.mp3"></audio>…（すべてのMP3）

<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 fileList = {
    "p": "p.mp3",…（すべてのMP3）
  };

  // デコード済みAudioBufferを格納する辞書
  const buffers = {};
  let filesToLoad = Object.keys(fileList).length;
  let errorOccurred = false;
  const loadDiv = document.getElementById("load");
  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))
      .then(audioBuffer => {
        buffers[key] = audioBuffer;
        filesToLoad--;
        if (filesToLoad === 0 && !errorOccurred) {
          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 updateSelectedTracks() {
    // チェック対象：cb1,cb2,cb3,cb4, cbs, cba, cbt
    const checkboxIds = ["cb1", "cb2", "cb3", "cb4", "cbs", "cba", "cbt"];
    let allChecked = true;
    checkboxIds.forEach(id => {
      if (!document.getElementById(id).checked) {
        allChecked = false;
      }
    });
    if (allChecked) {
      selectedTrackIds = ["all"];
    } else {
      // 常に「p」を追加
      let tracks = ["p"];
      const mapping = {
        "cb1": "1",
        "cb2": "2",
        "cb3": "3",
        "cb4": "4",
        "cbs": "s",
        "cba": "a",
        "cbt": "t"
      };
      Object.keys(mapping).forEach(cbId => {
        if (document.getElementById(cbId).checked) {
          tracks.push(mapping[cbId]);
        }
      });
      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>

質問投稿時のときのHTML

よろしくお願いいたします。

Comments

[int32_t]

三つの問題すべてに解決策を持ってないと回答が書きにくい状況になってます。一つの質問では一つの問題だけ扱うようにすると回答が付くかもしれません。

少なくとも、自分は「三つも問題を調べるのは面倒だから回答を書くのはやめよう」と思いました。

[kikukiku]

forで音源ごとに再生開始を実施していますので、
仕組み上、開始がずれるのは回避のしようがないです。
予めすべての組み合わせを混ぜた音源を作っておき、
それを再生するのが良いです。

[juner]

currentTime 設定後に読み込み完了を待てればよさそうですね。
canplay か何かでしょうか……？
https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/canplay_event

[kikukiku]

currentTimeは、音源内の指定時刻から再生する設定のようですね。
実時間の指定時刻に再生する機能があれば、実現できそうですね。
そんな機能はなさそう。
canplayですべての音源がバッファリングされたことを確認し、
forですべての音源に対してplayすれば、
遅延を最小限に抑えることはできると思います。
ただ０にはできない。
これで満足できなければ、やっぱり事前に音源を混ぜましょう。

[kikukiku]

すみません。実際に動かさずに
API仕様見てるだけなので、
いろりろ実験してみてください。
試行してみるのが早いと思います。

[kikukiku]

loadで音源データを読み込み、
loadstartイベントで読み込み完了したことを検知し、
playで再生することで、最小限の遅延で再生できそう。
※実験はしてないです。ごめん。

[juner]

currentTime をずらした後に readyState が HTMLMediaElement.HAVE_ENOUGH_DATA (4) 未満なら イベント canplaythrough を待つ処理をすればいけそうですね。（止まる問題
あとは設定前の paused を保持しておいて、 待機後に 必要に応じて play() 呼び出せばそれっぽい動きになりそうですね。

[KAN-KOFUN]

ありがとうございます。
以下のようなキャッシュを作るスクリプトを追加することで、ズレが少し減りました。

<script>
document.addEventListener("DOMContentLoaded", function () {
const files = [
"all.mp3", "p.mp3", "s.mp3", "a.mp3", "t.mp3",
"1.mp3", "2.mp3", "3.mp3", "4.mp3"
];

const cache = [];
let loadedCount = 0;
let errorOccurred = false;

// ロード画面を表示
const loadElement = document.getElementById("load");
loadElement.style.display = "block";

files.forEach(file => {
const audio = new Audio();
audio.preload = "auto";

audio.addEventListener("canplaythrough", () => {
loadedCount++;
if (loadedCount === files.length && !errorOccurred) {
loadElement.style.display = "none"; // すべてのファイルが読み込まれたら非表示
console.log("MP3ファイルのキャッシュが完了しました。");
}
});

audio.addEventListener("error", () => {
errorOccurred = true;
loadElement.style.display = "none"; // エラーが発生したら非表示
alert("MP3ファイルのキャッシュ作成に失敗しました: " + file);
});

audio.src = file;
cache.push(audio);
});
});
</script>

[juner]

それを質問文にコードとして載せた方がいいかもしれません。（コメント欄は見づらいので

[KAN-KOFUN]

ありがとうございます。
しかし、文字数が超えてしまうので載せられませんでした。

Answer 1

ぴったり合わせたい場合はWeb Audio APIが必要になるでしょう。
https://developer.mozilla.org/ja/docs/Games/Techniques/Audio_for_Web_Games#%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80

以上のリンクの

メモ: デモの実際の動きを見ることや、ソースコードを見ることができます。

のところに貼られているリンク先がまさに質問者さんが作りたいものだと思います。

ちなみに、mp3はその仕様上作成時に10ミリ秒ほどずれるらしいので、""本当に""ぴったり合わせたい場合は録音時点で音声ファイルフォーマットに気を付ける必要があります（が、合唱なら気づかないズレだと思います）

Comments

[KAN-KOFUN]

ありがとうございます。
それです。
試してみます。

[KAN-KOFUN]

Web Audio APIを使用する仕組みにして、そのコードを質問に追加しました。
このコード（スクリプト）でWeb Audio APIを利用できているのでしょうか。

[daiminkan]

だいたいの使い方はあっています。一時停止の操作は把握しきれていませんがそれ以外の部分で：

* ミュートをやりたいなら再生を止めるのではなく、パートごとにgainNodeを作ってそのgainを０にすると良いでしょう。https://developer.mozilla.org/ja/docs/Web/API/BaseAudioContext/createGain ここにサンプルコードがあります
* 同時再生のところですが、パートごとにcurrentTimeを参照した方がもっと合います。前パートを再生してから次のパートを再生するまでに少しだけ時間がたっているので。playStartTimeを「はじめに再生開始したパート」の開始時点でのcurrentTimeに指定して、残りのパートはpauseOffsetにさらにずれた分を加えると良いです。https://github.com/mdn/webaudio-examples/blob/main/multi-track/index.html#L126-L131 を参照