Reactで、音声ファイルの波形を描く方法

export type Peaks = { min: Float32Array; max: Float32Array };

// 音声ファイルを PCM（-1〜1 の数値の並び）にデコードする。
// 再生はしないので OfflineAudioContext を使う。デコード結果は、この 44100Hz に変換される
export async function decodeAudio(file: Blob): Promise<AudioBuffer> {
  const data = await file.arrayBuffer();
  const ctx = new OfflineAudioContext(1, 1, 44100);
  return ctx.decodeAudioData(data);
}

// 全体を columns 本の区間に分け、区間ごとの最小値と最大値を取る（全チャンネルをまとめて見る）
export function computePeaks(buffer: AudioBuffer, columns: number): Peaks {
  const channels = Array.from({ length: buffer.numberOfChannels }, (_, c) => buffer.getChannelData(c));
  const min = new Float32Array(columns);
  const max = new Float32Array(columns);
  for (let i = 0; i < columns; i++) {
    const start = Math.floor((i * buffer.length) / columns);
    const end = Math.max(start + 1, Math.floor(((i + 1) * buffer.length) / columns));
    let lo = 0;
    let hi = 0;
    for (const data of channels) {
      for (let j = start; j < end; j++) {
        const v = data[j];
        if (v < lo) lo = v;
        if (v > hi) hi = v;
      }
    }
    min[i] = lo;
    max[i] = hi;
  }
  return { min, max };
}

// 1区間を横1列にして、最大値から最小値までを縦の線で描く。progress（0〜1）より左は再生済みの色にする
export function drawWaveform(canvas: HTMLCanvasElement, peaks: Peaks, progress: number) {
  const dpr = window.devicePixelRatio || 1;
  const w = canvas.clientWidth;
  const h = canvas.clientHeight;
  canvas.width = Math.round(w * dpr);
  canvas.height = Math.round(h * dpr);
  const ctx = canvas.getContext('2d')!;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  ctx.clearRect(0, 0, w, h);

  const n = peaks.min.length;
  const colW = w / n;
  const mid = h / 2;
  for (let i = 0; i < n; i++) {
    const top = mid - peaks.max[i] * mid;
    const bottom = mid - peaks.min[i] * mid;
    ctx.fillStyle = (i + 0.5) / n <= progress ? '#00c8e8' : '#c5ccd0';
    ctx.fillRect(i * colW, top, colW, Math.max(1, bottom - top));
  }
  // 再生位置の線
  ctx.fillStyle = '#1f2a30';
  ctx.fillRect(Math.min(progress * w, w - 2), 0, 2, h);
}

import { type MouseEvent, useEffect, useRef, useState } from 'react';
import { computePeaks, decodeAudio, drawWaveform, type Peaks } from './waveform';

type Props = { file: File; width?: number; height?: number };

export function AudioWaveform({ file, width = 600, height = 120 }: Props) {
  const audioRef = useRef<HTMLAudioElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [peaks, setPeaks] = useState<Peaks | null>(null);
  const [error, setError] = useState('');
  const [src, setSrc] = useState('');
  const [progress, setProgress] = useState(0);

  // ファイルが変わったら、再生用の URL を作り、波形のデータを作り直す
  useEffect(() => {
    let ignore = false;
    setPeaks(null);
    setError('');
    setProgress(0);
    const url = URL.createObjectURL(file);
    setSrc(url);
    decodeAudio(file)
      .then((buffer) => {
        if (!ignore) setPeaks(computePeaks(buffer, width));
      })
      .catch((e: unknown) => {
        if (!ignore) setError(`波形を作れませんでした（${e instanceof Error ? e.name : 'Error'}）`);
      });
    return () => {
      ignore = true;
      URL.revokeObjectURL(url);
    };
  }, [file, width]);

  useEffect(() => {
    if (peaks) drawWaveform(canvasRef.current!, peaks, progress);
  }, [peaks, progress]);

  // 再生中は、画面の書き換えごとに再生位置を読む
  useEffect(() => {
    const audio = audioRef.current!;
    let id = 0;
    const update = () => setProgress(audio.duration ? audio.currentTime / audio.duration : 0);
    const loop = () => {
      update();
      id = requestAnimationFrame(loop);
    };
    const start = () => {
      cancelAnimationFrame(id);
      loop();
    };
    const stop = () => {
      cancelAnimationFrame(id);
      update();
    };
    audio.addEventListener('play', start);
    audio.addEventListener('pause', stop);
    audio.addEventListener('seeked', update);
    return () => {
      cancelAnimationFrame(id);
      audio.removeEventListener('play', start);
      audio.removeEventListener('pause', stop);
      audio.removeEventListener('seeked', update);
    };
  }, []);

  // 波形を押した位置へ移動する
  const seek = (e: MouseEvent<HTMLCanvasElement>) => {
    const audio = audioRef.current!;
    if (!audio.duration) return;
    const rect = e.currentTarget.getBoundingClientRect();
    audio.currentTime = ((e.clientX - rect.left) / rect.width) * audio.duration;
  };

  return (
    <div>
      {error ? <p role="alert">{error}</p> : !peaks && <p>波形を作っています…</p>}
      <canvas
        ref={canvasRef}
        onClick={seek}
        style={{ width, height, display: peaks ? 'block' : 'none', cursor: 'pointer' }}
      />
      <audio ref={audioRef} src={src || undefined} controls />
    </div>
  );
}

function App() {
  const [file, setFile] = useState<File | null>(null);
  return (
    <>
      <input type="file" accept="audio/*" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
      {file && <AudioWaveform file={file} />}
    </>
  );
}