audio-player.js

const playIcon = `<svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.3v13.4c0 .8.9 1.3 1.6.8l10.1-6.7a1 1 0 0 0 0-1.6L9.6 4.5A1 1 0 0 0 8 5.3Z"/></svg>`;
const pauseIcon = `<svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4.5" height="14" rx="1"/><rect x="13.5" y="5" width="4.5" height="14" rx="1"/></svg>`;

function formatTime(value) {
  const seconds = Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
}

function userError(error) {
  if (error?.name === "NotAllowedError") return "再生がブラウザにより停止されました。再生ボタンをもう一度押してください。";
  if (error?.name === "NotSupportedError") return "この音声形式はブラウザで再生できません。別の音声ファイルをお試しください。";
  return "音声を再生できませんでした。音声ファイルを確認して、もう一度お試しください。";
}

/** Controls a native audio element and draws decoded mono 16 kHz samples locally. */
export function createAudioPlayer({ audio, container, canvas, playButton, seek, time, speed, onError } = {}) {
  if (!audio || !container || !canvas || !playButton || !seek || !time || !speed) {
    throw new Error("音声プレーヤーのUI要素が不足しています。");
  }

  const context = canvas.getContext("2d");
  let samples = new Float32Array();
  let animationFrame = 0;
  let lastDrawAt = 0;
  let disposed = false;
  let resizeObserver = null;

  canvas.setAttribute("role", "img");
  canvas.setAttribute("aria-label", "音声の波形と再生位置");
  seek.min = "0"; seek.step = "0.01"; seek.value = "0";
  seek.setAttribute("aria-label", "再生位置");

  function duration() { return Number.isFinite(audio.duration) ? audio.duration : 0; }
  function setState(value) { container.dataset.playerState = value; }
  function setButton(playing) {
    playButton.setAttribute("aria-label", playing ? "一時停止" : "再生");
    playButton.setAttribute("aria-pressed", String(playing));
    playButton.innerHTML = playing ? pauseIcon : playIcon;
  }
  function updateText() { time.textContent = `${formatTime(audio.currentTime)} / ${formatTime(duration())}`; }
  function updateSeek() { seek.max = String(duration()); seek.value = String(Math.min(duration(), audio.currentTime || 0)); updateText(); }

  function canvasSize() {
    const rect = canvas.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    const width = Math.max(1, Math.round(rect.width * dpr));
    const height = Math.max(1, Math.round(rect.height * dpr));
    if (canvas.width !== width || canvas.height !== height) { canvas.width = width; canvas.height = height; }
    return { width, height, dpr };
  }

  function draw() {
    const { width, height, dpr } = canvasSize();
    context.clearRect(0, 0, width, height);
    const style = getComputedStyle(container);
    const brand = style.getPropertyValue("--brand").trim() || "#7203ff";
    const muted = style.getPropertyValue("--wave-muted").trim() || "#c6c8d0";
    const binCount = Math.max(24, Math.min(140, Math.round((width / dpr) / 4)));
    const progress = duration() ? Math.max(0, Math.min(1, audio.currentTime / duration())) : 0;
    const gap = Math.max(1, Math.round(dpr));
    const barWidth = Math.max(1, (width - gap * (binCount - 1)) / binCount);
    const minHeight = Math.max(2 * dpr, height * 0.07);
    for (let bin = 0; bin < binCount; bin += 1) {
      const start = Math.floor(bin * samples.length / binCount);
      const end = Math.max(start + 1, Math.floor((bin + 1) * samples.length / binCount));
      let peak = 0;
      for (let index = start; index < end; index += 1) peak = Math.max(peak, Math.abs(samples[index] || 0));
      const barHeight = Math.max(minHeight, peak * (height * 0.9));
      const x = bin * (barWidth + gap);
      context.fillStyle = (bin + 0.5) / binCount <= progress ? brand : muted;
      context.beginPath();
      if (typeof context.roundRect === "function") context.roundRect(x, (height - barHeight) / 2, barWidth, barHeight, Math.min(barWidth / 2, 3 * dpr));
      else context.rect(x, (height - barHeight) / 2, barWidth, barHeight);
      context.fill();
    }
  }

  function animate(now) {
    if (audio.paused || disposed) { animationFrame = 0; return; }
    animationFrame = requestAnimationFrame(animate);
    if (now - lastDrawAt >= 50) { lastDrawAt = now; updateSeek(); draw(); }
  }
  function startAnimation() {
    if (!animationFrame) { lastDrawAt = 0; animationFrame = requestAnimationFrame(animate); }
  }
  function stopAnimation() { cancelAnimationFrame(animationFrame); animationFrame = 0; }

  async function togglePlay() {
    if (!audio.paused) { audio.pause(); return; }
    setState("waiting"); playButton.disabled = true;
    try { await audio.play(); }
    catch (error) { setState("error"); setButton(false); onError?.(new Error(userError(error))); }
    finally { playButton.disabled = false; }
  }

  function onMetadata() {
    container.hidden = false; updateSeek(); setButton(false); setState("ready"); draw();
  }
  function onSourceReset() {
    stopAnimation(); seek.value = "0"; time.textContent = "0:00 / 0:00"; setButton(false); setState("loading"); draw();
  }
  function onPlay() { setState("playing"); setButton(true); startAnimation(); }
  function onPause() { setState("paused"); setButton(false); stopAnimation(); updateSeek(); draw(); }
  function onEnded() { setState("ended"); setButton(false); stopAnimation(); updateSeek(); draw(); }
  function onWaiting() { setState("waiting"); }
  function onErrorEvent() { setState("error"); setButton(false); stopAnimation(); onError?.(new Error(userError(audio.error))); }

  const listeners = [
    ["loadedmetadata", onMetadata], ["durationchange", updateSeek], ["loadstart", onSourceReset], ["emptied", onSourceReset],
    ["timeupdate", () => { updateSeek(); if (audio.paused) draw(); }], ["play", onPlay], ["pause", onPause], ["ended", onEnded], ["waiting", onWaiting], ["error", onErrorEvent]
  ];
  listeners.forEach(([event, handler]) => audio.addEventListener(event, handler));

  playButton.addEventListener("click", togglePlay);
  seek.addEventListener("input", () => { const position = Number(seek.value); if (Number.isFinite(position)) { audio.currentTime = position; updateText(); draw(); } });
  speed.addEventListener("change", () => { const rate = Number(speed.value); if (Number.isFinite(rate) && rate > 0) audio.playbackRate = rate; });
  if (typeof ResizeObserver !== "undefined") { resizeObserver = new ResizeObserver(draw); resizeObserver.observe(canvas); }

  function setSamples(value) {
    if (!(value instanceof Float32Array)) throw new TypeError("波形データはFloat32Arrayで指定してください。");
    samples = value.slice(); draw();
  }
  function dispose() {
    disposed = true; stopAnimation(); resizeObserver?.disconnect(); resizeObserver = null;
    listeners.forEach(([event, handler]) => audio.removeEventListener(event, handler));
    playButton.removeEventListener("click", togglePlay);
    audio.pause();
  }

  const initialRate = Number(speed.value); if (Number.isFinite(initialRate) && initialRate > 0) audio.playbackRate = initialRate;
  setButton(false); updateText(); setState("idle"); draw();
  return { setSamples, refreshTheme: draw, dispose };
}