Reactで、押すと音が鳴る鍵盤を作る方法

// MIDI のノート番号（A4 = 69）から周波数を出す（平均律、A4 = 440Hz）
export function noteFrequency(midi: number): number {
  return 440 * 2 ** ((midi - 69) / 12);
}

export type Voice = { stop: (at?: number) => void };

// 1つの音を鳴らし始める。止めるときは、返した stop を呼ぶ
export function startNote(ctx: BaseAudioContext, frequency: number, when = ctx.currentTime): Voice {
  const osc = new OscillatorNode(ctx, { type: 'triangle', frequency });
  const gain = new GainNode(ctx, { gain: 0 });
  osc.connect(gain).connect(ctx.destination);

  gain.gain.setValueAtTime(0, when);
  gain.gain.linearRampToValueAtTime(0.3, when + 0.01); // 10ms かけて音量を上げる
  osc.start(when);

  return {
    stop(at = ctx.currentTime) {
      gain.gain.cancelScheduledValues(at);
      gain.gain.setTargetAtTime(0, at, 0.03); // 音量を少しずつ 0 に近づける
      osc.stop(at + 0.3); // 十分に小さくなってから止める
    },
  };
}

import { useCallback, useEffect, useRef, useState } from 'react';
import { noteFrequency, startNote, type Voice } from './note';

type Key = { midi: number; name: string; black: boolean; code: string };

// C4（ド）から C5 までの13鍵と、パソコンのキーの割り当て
const KEYS: Key[] = [
  { midi: 60, name: 'C4', black: false, code: 'KeyA' },
  { midi: 61, name: 'C#4', black: true, code: 'KeyW' },
  { midi: 62, name: 'D4', black: false, code: 'KeyS' },
  { midi: 63, name: 'D#4', black: true, code: 'KeyE' },
  { midi: 64, name: 'E4', black: false, code: 'KeyD' },
  { midi: 65, name: 'F4', black: false, code: 'KeyF' },
  { midi: 66, name: 'F#4', black: true, code: 'KeyT' },
  { midi: 67, name: 'G4', black: false, code: 'KeyG' },
  { midi: 68, name: 'G#4', black: true, code: 'KeyY' },
  { midi: 69, name: 'A4', black: false, code: 'KeyH' },
  { midi: 70, name: 'A#4', black: true, code: 'KeyU' },
  { midi: 71, name: 'B4', black: false, code: 'KeyJ' },
  { midi: 72, name: 'C5', black: false, code: 'KeyK' },
];

export function Piano() {
  const ctxRef = useRef<AudioContext | null>(null);
  const voices = useRef(new Map<number, Voice>());
  const [pressed, setPressed] = useState<ReadonlySet<number>>(new Set());

  const press = useCallback((midi: number) => {
    if (voices.current.has(midi)) return; // 鳴っている音は重ねない
    ctxRef.current ??= new AudioContext(); // 最初に押されたときに作る
    const ctx = ctxRef.current;
    if (ctx.state === 'suspended') void ctx.resume();
    voices.current.set(midi, startNote(ctx, noteFrequency(midi)));
    setPressed((s) => new Set(s).add(midi));
  }, []);

  const release = useCallback((midi: number) => {
    const voice = voices.current.get(midi);
    if (!voice) return;
    voice.stop();
    voices.current.delete(midi);
    setPressed((s) => {
      const next = new Set(s);
      next.delete(midi);
      return next;
    });
  }, []);

  // パソコンのキーボードでも弾けるようにする
  useEffect(() => {
    function onKeyDown(e: KeyboardEvent) {
      if (e.repeat || e.ctrlKey || e.metaKey || e.altKey) return; // 押しっぱなしの自動の繰り返しは無視する
      const key = KEYS.find((k) => k.code === e.code);
      if (key) press(key.midi);
    }
    function onKeyUp(e: KeyboardEvent) {
      const key = KEYS.find((k) => k.code === e.code);
      if (key) release(key.midi);
    }
    function onBlur() {
      // ウィンドウからフォーカスが外れたら、鳴っている音をすべて止める
      for (const midi of [...voices.current.keys()]) release(midi);
    }
    window.addEventListener('keydown', onKeyDown);
    window.addEventListener('keyup', onKeyUp);
    window.addEventListener('blur', onBlur);
    return () => {
      window.removeEventListener('keydown', onKeyDown);
      window.removeEventListener('keyup', onKeyUp);
      window.removeEventListener('blur', onBlur);
    };
  }, [press, release]);

  return (
    <div className="piano" role="group" aria-label="鍵盤">
      {KEYS.map((k) => (
        <button
          key={k.midi}
          type="button"
          className={`key ${k.black ? 'black' : 'white'}${pressed.has(k.midi) ? ' pressed' : ''}`}
          aria-label={k.name}
          aria-pressed={pressed.has(k.midi)}
          onPointerDown={() => press(k.midi)}
          onPointerUp={() => release(k.midi)}
          onPointerLeave={() => release(k.midi)}
          onPointerCancel={() => release(k.midi)}
        >
          <span>{k.name}</span>
        </button>
      ))}
    </div>
  );
}

.piano { display: flex; align-items: flex-start; height: 180px; user-select: none; touch-action: none; }
.key { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 8px; border: 1px solid #1f2a30; font: 12px sans-serif; cursor: pointer; }
.key.white { width: 48px; height: 100%; background: #fff; color: #1f2a30; border-radius: 0 0 6px 6px; }
.key.black { width: 30px; height: 60%; margin: 0 -15px; z-index: 1; background: #1f2a30; color: #fff; border-radius: 0 0 4px 4px; }
.key.pressed { background: #00c8e8; color: #1f2a30; }