Vai al contenuto

Per iniziare

GitHub

Puoi usare il nostro setup assistito dall'IA per installare il plugin. Aggiungi le skill Capgo al tuo strumento di IA usando il seguente comando:

Finestra del terminale
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Poi usa il seguente prompt:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-media-session` plugin in my project.

Se preferisci la configurazione manuale, installa il plugin eseguendo questi comandi e segui le istruzioni specifiche per piattaforma qui sotto:

Finestra del terminale
bun add @capgo/capacitor-media-session
bunx cap sync
import { MediaSession } from '@capgo/capacitor-media-session';

Pubblica i metadati e lo stato di riproduzione all'avvio del player.

import { MediaSession } from '@capgo/capacitor-media-session';
await MediaSession.setMetadata({
title: 'Episode 12',
artist: 'Capgo Podcast',
album: 'Ship faster',
artwork: [{ src: 'https://cdn.example.com/artwork.png', sizes: '512x512', type: 'image/png' }],
});
await MediaSession.setPlaybackState({ playbackState: 'playing' });
await MediaSession.setPositionState({
duration: 3600,
position: 120,
playbackRate: 1,
});

Esempio: gestire i controlli della schermata di blocco

Sezione intitolata “Esempio: gestire i controlli dello schermo di blocco”
await MediaSession.setActionHandler({ action: 'play' }, () => {
audio.play();
});
await MediaSession.setActionHandler({ action: 'pause' }, () => {
audio.pause();
});
await MediaSession.setActionHandler({ action: 'seekto' }, (details) => {
if (details.seekTime != null) {
audio.currentTime = details.seekTime;
}
});

Passa null come handler per deregistrare un'azione.

await MediaSession.setPlaybackState({ playbackState: 'paused' });
// resume with 'playing' when your buffer is ready
  • Mantieni la posizione aggiornata: chiamata setPositionState man mano che la riproduzione avanza, altrimenti lo scrubbing sembrerà rotto su Android.
  • URL delle immagini: usa asset HTTPS raggiungibili dal dispositivo, le immagini grandi rallentano gli aggiornamenti della lock screen.
  • Durata di vita dell'handler: register handlers once at player setup, not on every track change.

Imposta i metadati del media in riproduzione.

import { MediaSession } from '@capgo/capacitor-media-session';
await MediaSession.setMetadata({ album: 'album' });

Aggiorna lo stato di riproduzione della media session.

import { MediaSession } from '@capgo/capacitor-media-session';
await MediaSession.setPlaybackState({ playbackState: 'none' });

Registra un handler per un'azione della media session.

import { MediaSession } from '@capgo/capacitor-media-session';
await MediaSession.setActionHandler({ action: 'play' }, (details) => {
console.log(details);
});

Aggiorna lo stato della posizione per la media session attiva.

import { MediaSession } from '@capgo/capacitor-media-session';
await MediaSession.setPositionState({
duration: 1000,
playbackRate: 1,
position: 10,
});
export interface MetadataOptions {
album?: string;
artist?: string;
artwork?: MediaImage[];
title?: string;
}
export interface PlaybackStateOptions {
playbackState: MediaSessionPlaybackState;
}
export interface ActionHandlerOptions {
action: MediaSessionAction;
}
export type ActionHandler = (details: ActionDetails) => void;
export interface PositionStateOptions {
duration?: number;
playbackRate?: number;
position?: number;
}
export interface MediaImage {
src: string;
sizes?: string;
type?: string;
}
export type MediaSessionPlaybackState = 'none' | 'paused' | 'playing';
export type MediaSessionAction =
| 'play'
| 'pause'
| 'seekbackward'
| 'seekforward'
| 'previoustrack'
| 'nexttrack'
| 'seekto'
| 'stop';

Questa pagina è generata dal src/definitions.ts. Riesegui la sync quando il API pubblico cambia upstream.

Se stai usando Per iniziare per pianificare le operazioni della dashboard e di API, collegalo a Utilizzo di @capgo/capacitor-media-session per la funzionalità nativa in Utilizzo di @capgo/capacitor-media-session, Panoramica API per i dettagli di implementazione in Panoramica di API, Introduzione per i dettagli di implementazione in Introduzione, Chiavi API per i dettagli di implementazione in Chiavi API, e Dispositivi per i dettagli di implementazione in Dispositivi.