Reactで、文章を読み上げるボタンを作る方法

import { useCallback, useEffect, useState } from 'react';

// ブラウザに入っている日本語の声を探す。一覧はあとから届くことがあるので、voiceschanged でも探し直す
export function useJapaneseVoice(): SpeechSynthesisVoice | null {
  const [voice, setVoice] = useState<SpeechSynthesisVoice | null>(null);

  useEffect(() => {
    if (!('speechSynthesis' in window)) return;
    const pick = () => {
      const ja = speechSynthesis.getVoices().filter((v) => v.lang.toLowerCase().startsWith('ja'));
      setVoice(ja.find((v) => v.default) ?? ja[0] ?? null);
    };
    pick();
    speechSynthesis.addEventListener('voiceschanged', pick);
    return () => speechSynthesis.removeEventListener('voiceschanged', pick);
  }, []);

  return voice;
}

// どの文章を読み上げているかを id で持つ。同時に読み上げるのは1つだけ
export function useSpeech(voice: SpeechSynthesisVoice | null, rate: number) {
  const [speakingId, setSpeakingId] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const speak = useCallback(
    (id: string, text: string) => {
      speechSynthesis.cancel(); // 読み上げ中のものがあれば止める（後ろに並べない）
      const u = new SpeechSynthesisUtterance(text);
      u.lang = 'ja-JP';
      if (voice) u.voice = voice;
      u.rate = rate;
      u.onstart = () => setSpeakingId(id);
      u.onend = () => setSpeakingId(null);
      u.onerror = (e) => {
        setSpeakingId(null);
        // cancel() で止めたときも error が届く。これはエラーとして表示しない
        if (e.error !== 'interrupted' && e.error !== 'canceled') {
          setError(`読み上げられませんでした（${e.error}）`);
        }
      };
      setError(null);
      speechSynthesis.speak(u);
    },
    [voice, rate],
  );

  const stop = useCallback(() => speechSynthesis.cancel(), []);

  // 画面から消えたら、読み上げも止める
  useEffect(
    () => () => {
      if ('speechSynthesis' in window) speechSynthesis.cancel();
    },
    [],
  );

  return { speakingId, error, speak, stop };
}

type Props = {
  speaking: boolean;
  disabled: boolean;
  onSpeak: () => void;
  onStop: () => void;
};

export function SpeakButton({ speaking, disabled, onSpeak, onStop }: Props) {
  return (
    <button
      type="button"
      className={`speak${speaking ? ' speaking' : ''}`}
      onClick={speaking ? onStop : onSpeak}
      disabled={disabled}
      aria-pressed={speaking}
    >
      {speaking ? '■ 止める' : '▶ 読み上げる'}
    </button>
  );
}

import { useState } from 'react';
import { SpeakButton } from './SpeakButton';
import { useJapaneseVoice, useSpeech } from './useSpeech';

const PARAGRAPHS = [
  { id: 'p1', text: '猫は一日の半分以上を寝て過ごします。' },
  { id: 'p2', text: '暖かい場所を見つけるのが得意で、冬は日なたから動きません。' },
];

export function Article() {
  const supported = 'speechSynthesis' in window;
  const voice = useJapaneseVoice();
  const [rate, setRate] = useState(1);
  const { speakingId, error, speak, stop } = useSpeech(voice, rate);

  if (!supported) return <p>このブラウザは読み上げに対応していません。</p>;

  return (
    <div className="article">
      <label>
        速さ
        <select value={rate} onChange={(e) => setRate(Number(e.target.value))}>
          <option value={0.75}>ゆっくり</option>
          <option value={1}>ふつう</option>
          <option value={1.5}>速い</option>
        </select>
      </label>
      {voice === null && <p className="voice">日本語の声が見つかりません。</p>}
      {PARAGRAPHS.map((p) => (
        <section key={p.id} className="para">
          <p>{p.text}</p>
          <SpeakButton
            speaking={speakingId === p.id}
            disabled={voice === null}
            onSpeak={() => speak(p.id, p.text)}
            onStop={stop}
          />
        </section>
      ))}
      {error && <p role="alert">{error}</p>}
    </div>
  );
}

body { font: 16px/1.7 sans-serif; color: #1f2a30; margin: 16px; }
.para { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 12px 0; }
.para p { margin: 0; }
.speak { font: inherit; padding: 4px 14px; border: 2px solid #00c8e8; border-radius: 999px; background: #fff; color: #067a98; cursor: pointer; }
.speak.speaking { background: #00c8e8; color: #1f2a30; }
.speak:disabled { border-color: #9aa5ab; color: #9aa5ab; cursor: default; }