ReactとMedia Sessionで、通知領域から再生を操作する方法

// useMediaSession.ts
import { useEffect, useEffectEvent } from 'react';

export type MediaSessionHandlers = Partial<
  Record<MediaSessionAction, (details: MediaSessionActionDetails) => void>
>;

const ACTIONS: MediaSessionAction[] = [
  'play', 'pause', 'stop', 'previoustrack', 'nexttrack',
  'seekbackward', 'seekforward', 'seekto',
];

export function useMediaSession(
  metadata: MediaMetadataInit | null,
  handlers: MediaSessionHandlers,
) {
  // 通知領域に出す曲名・アーティスト・画像
  useEffect(() => {
    if (!('mediaSession' in navigator)) return;
    navigator.mediaSession.metadata = metadata ? new MediaMetadata(metadata) : null;
    return () => {
      navigator.mediaSession.metadata = null;
    };
  }, [metadata]);

  // いつ呼ばれても、最新の handlers を使う
  const onAction = useEffectEvent((details: MediaSessionActionDetails) => {
    handlers[details.action]?.(details);
  });

  // 渡された操作の名前が変わったときだけ、登録し直す
  const names = ACTIONS.filter((a) => handlers[a]).join(',');
  useEffect(() => {
    if (!('mediaSession' in navigator)) return;
    const list = names ? (names.split(',') as MediaSessionAction[]) : [];
    for (const action of list) {
      try {
        navigator.mediaSession.setActionHandler(action, onAction);
      } catch {
        // このブラウザが知らない操作の名前は、登録できずに例外になる
      }
    }
    return () => {
      for (const action of list) {
        try {
          navigator.mediaSession.setActionHandler(action, null);
        } catch {}
      }
    };
  }, [names]);
}

// Player.tsx
import { useRef, useState } from 'react';
import { tracks } from './tracks';
import { useMediaSession } from './useMediaSession';

export function Player() {
  const audioRef = useRef<HTMLAudioElement>(null);
  const [index, setIndex] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
  const track = tracks[index];

  const changeTrack = (next: number) => {
    setIndex((next + tracks.length) % tracks.length);
  };

  useMediaSession(track.metadata, {
    play: () => { audioRef.current?.play(); },
    pause: () => { audioRef.current?.pause(); },
    previoustrack: () => changeTrack(index - 1),
    nexttrack: () => changeTrack(index + 1),
    seekto: (d) => {
      const audio = audioRef.current;
      if (audio && d.seekTime !== undefined) audio.currentTime = d.seekTime;
    },
    seekbackward: (d) => {
      const audio = audioRef.current;
      if (audio) audio.currentTime = Math.max(audio.currentTime - (d.seekOffset ?? 10), 0);
    },
    seekforward: (d) => {
      const audio = audioRef.current;
      if (audio) audio.currentTime = Math.min(audio.currentTime + (d.seekOffset ?? 10), audio.duration);
    },
  });

  return (
    <div>
      <p>{track.metadata.title}（{index + 1}/{tracks.length}）</p>
      <audio
        ref={audioRef}
        src={track.src}
        controls
        autoPlay={isPlaying}
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
        onEnded={() => changeTrack(index + 1)}
      />
      <p>
        <button onClick={() => changeTrack(index - 1)}>前の曲</button>
        <button onClick={() => (isPlaying ? audioRef.current?.pause() : audioRef.current?.play())}>
          {isPlaying ? '一時停止' : '再生'}
        </button>
        <button onClick={() => changeTrack(index + 1)}>次の曲</button>
      </p>
      <p>{isPlaying ? '再生中' : '停止中'}</p>
    </div>
  );
}

// tracks.ts（3曲のうち1曲目だけを示す）
export type Track = { src: string; metadata: MediaMetadataInit };

export const tracks: Track[] = [
  { src: '/track1.webm', metadata: { title: '朝の散歩', artist: 'ねこの手楽団', album: '検証用の音', artwork: [{ src: '/art1.png', sizes: '256x256', type: 'image/png' }] } },
  // 2曲目、3曲目も同じ形
];

$ playerctl metadata
chromium mpris:artUrl              file:///tmp/(省略)
chromium mpris:length              60008000
chromium mpris:trackid             '/org/chromium/MediaPlayer2/TrackList/Track6BBAAC37133CDE433FA5646A96232411'
chromium xesam:album               検証用の音
chromium xesam:artist              ねこの手楽団
chromium xesam:title               朝の散歩

useEffect(() => {
  navigator.mediaSession.setActionHandler('nexttrack', () => {
    setIndex((index + 1) % tracks.length);
  });
}, []); // index を使っているのに、最初の1回しか登録しない