Memulai

1. Instal plugin

   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. Sinkronkan platform

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

ℹ️ Media Session API tersedia di Android (browser berbasis Chrome, WebView) dan banyak browser desktop. Pada platform yang tidak didukung, pemanggilan akan terselesaikan tanpa efek, jadi sesuaikan UI Anda dengan tepat.

Publikasikan 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' },
  ],
});

Perbarui status pemutaran

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

// Jeda nanti jika diperlukan
await MediaSession.setPlaybackState({ playbackState: 'paused' });

Tangani aksi media

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' });
});

// Hapus handler saat Anda membuang pemutar
await MediaSession.setActionHandler({ action: 'pause' }, null);

Jaga posisi tetap sinkron

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

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

Rekomendasi

• Perbarui metadata saat trek berubah agar notifikasi dan smart speaker tetap terbaru.
• Batasi pembaruan posisi (misalnya setiap 250 ms) untuk menghindari spam pada lapisan asli.
• Selalu hapus action handler saat membersihkan instance pemutar untuk mencegah kebocoran yang tidak disengaja.