はじめに

1. プラグインをインストール

   npm

   npm i @capgo/capacitor-media-session

   pnpm

   pnpm add @capgo/capacitor-media-session

   yarn

   yarn add @capgo/capacitor-media-session

   bun

   bun add @capgo/capacitor-media-session

2. プラットフォームを同期

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

ℹ️ Media Session APIは、Android（Chromeベースのブラウザ、WebView）および多くのデスクトップブラウザで利用可能です。サポートされていないプラットフォームでは、呼び出しは効果なく解決されるため、それに応じてUIを保護してください。

メタデータを公開

import { MediaSession } from '@capgo/capacitor-media-session';

await MediaSession.setMetadata({
  title: 'Weekly Tech Podcast',
  artist: 'Capgo Studio',
  album: 'Season 2',
  artwork: [
    { src: 'https://cdn.example.com/covers/s02e05-512.png', sizes: '512x512', type: 'image/.png' },
  ],
});

再生状態を更新

await MediaSession.setPlaybackState({ playbackState: 'playing' });

// 必要に応じて後で一時停止
await MediaSession.setPlaybackState({ playbackState: 'paused' });

メディアアクションを処理

const pauseHandler = async () => {
  player.pause();
  await MediaSession.setPlaybackState({ playbackState: 'paused' });
};

await MediaSession.setActionHandler({ action: 'pause' }, pauseHandler);
await MediaSession.setActionHandler({ action: 'play' }, async () => {
  await player.play();
  await MediaSession.setPlaybackState({ playbackState: 'playing' });
});

// プレーヤーを破棄するときにハンドラを削除
await MediaSession.setActionHandler({ action: 'pause' }, null);

位置を同期

const updatePosition = async () => {
  await MediaSession.setPositionState({
    duration: player.duration,
    position: player.currentTime,
    playbackRate: player.playbackRate,
  });
};

player.ontimeupdate = updatePosition;
player.onratechange = updatePosition;

推奨事項

• トラックが変更されたときにメタデータを更新して、通知とスマートスピーカーを最新の状態に保ちます。
• ネイティブレイヤーへのスパムを避けるために、位置の更新を調整します（例：250ミリ秒ごと）。
• プレーヤーインスタンスを破棄するときは、常にアクションハンドラを削除して、誤ったリークを防ぎます。