콘텐츠로 건너뛰기
Capgo

Getting Started

이 콘텐츠는 아직 귀하의 언어로 제공되지 않습니다.

  1. Install the plugin

    Terminal window
    npm i @capgo/capacitor-media-session

  2. Sync platforms

    Terminal window
    npx cap sync

ℹ️ The Media Session API is available on Android (Chrome based browsers, WebView) and many desktop browsers. On unsupported platforms the calls resolve without taking effect, so guard your UI accordingly.

Publish metadata

Section titled “Publish metadata”
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' },
  ],
});

Update playback state

Section titled “Update playback state”
await MediaSession.setPlaybackState({ playbackState: 'playing' });


// Pause later if needed
await MediaSession.setPlaybackState({ playbackState: 'paused' });

Handle media actions

Section titled “Handle media actions”
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' });
});


// Remove a handler when you dispose the player
await MediaSession.setActionHandler({ action: 'pause' }, null);

Keep position in sync

Section titled “Keep position in sync”
const updatePosition = async () => {
  await MediaSession.setPositionState({
    duration: player.duration,
    position: player.currentTime,
    playbackRate: player.playbackRate,
  });
};


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

Recommendations

Section titled “Recommendations”
  • Refresh metadata when the track changes so notifications and smart speakers stay up to date.
  • Throttle position updates (e.g. every 250 ms) to avoid spamming the native layer.
  • Always remove action handlers when tearing down a player instance to prevent accidental leakage.