@capgo/capacitor-media-session
Show now-playing info and media controls on the lock screen, notification shade and control center for audio or video in your Capacitor app.
Capgo: push fixes to your Capacitor users in minutes, build signed iOS and Android apps without a Mac, and roll back in one click.
➡️ Get started for free
14-day unlimited free trial. No credit card required
🤖 Building with an AI coding agent? Install Capgo skills so Claude Code, Codex, Cursor, Copilot, or Gemini CLI know how to install and use
@capgo/capacitor-media-sessionin your Capacitor app:npx skills add Cap-go/capgo-skills. Then ask your agent: "Add @capgo/capacitor-media-session to my Capacitor app and wire it up." Agent setup guides · Hosted MCP
Key features
- Metadata:
setMetadata()sets title, artist, album and artwork. - Playback state:
setPlaybackState()shows playing, paused or none. - Remote controls:
setActionHandler()handles play, pause, seek, next and previous. - Progress:
setPositionState()updates duration, position and playback rate. - Platforms: iOS, Android and Web. iOS uses MediaPlayer now playing info, Android uses a media session service. Web uses the Media Session API.
Documentation
The most complete doc is available here: https://capgo.app/docs/plugins/media-session/
Compatibility
| Plugin version | Capacitor compatibility | Maintained |
|---|---|---|
| v8.*.* | v8.*.* | ✅ |
| v7.*.* | v7.*.* | On demand |
| v6.*.* | v6.*.* | ❌ |
| v5.*.* | v5.*.* | ❌ |
Note: The major version of this plugin follows the major version of Capacitor. Use the version that matches your Capacitor installation (e.g., plugin v8 for Capacitor 8). Only the latest major version is actively maintained.
Install
You can use our AI-Assisted Setup to install the plugin. Add the Capgo skills to your AI tool using the following command:
npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins
Then use the following prompt:
Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-media-session` plugin in my project.
If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:
npm install @capgo/capacitor-media-session
npx cap sync
API
setMetadata(...)setPlaybackState(...)setActionHandler(...)setPositionState(...)getPluginVersion()- Interfaces
- Type Aliases
setMetadata(...)
setMetadata(options: MetadataOptions) => Promise<void>
Sets metadata of the currently playing media.
| Param | Type |
|---|---|
options | MetadataOptions |
setPlaybackState(...)
setPlaybackState(options: PlaybackStateOptions) => Promise<void>
Updates the playback state of the media session.
| Param | Type |
|---|---|
options | PlaybackStateOptions |
setActionHandler(...)
setActionHandler(options: ActionHandlerOptions, handler: ActionHandler | null) => Promise<void>
Registers a handler for a media session action.
| Param | Type |
|---|---|
options | ActionHandlerOptions |
handler | ActionHandler | null |
setPositionState(...)
setPositionState(options: PositionStateOptions) => Promise<void>
Updates position state for the active media session.
| Param | Type |
|---|---|
options | PositionStateOptions |
getPluginVersion()
getPluginVersion() => Promise<{ version: string; }>
Get the native Capacitor plugin version
Returns: Promise<{ version: string; }>
Interfaces
MetadataOptions
| Prop | Type |
|---|---|
album | string |
artist | string |
artwork | MediaImage[] |
title | string |
MediaImage
| Prop | Type |
|---|---|
src | string |
sizes | string |
type | string |
PlaybackStateOptions
| Prop | Type |
|---|---|
playbackState | MediaSessionPlaybackState |
ActionHandlerOptions
| Prop | Type |
|---|---|
action | MediaSessionAction |
ActionDetails
| Prop | Type |
|---|---|
action | MediaSessionAction |
seekTime | number | null |
PositionStateOptions
| Prop | Type |
|---|---|
duration | number |
playbackRate | number |
position | number |
Type Aliases
MediaSessionPlaybackState
'none' | 'paused' | 'playing'
MediaSessionAction
'play' | 'pause' | 'seekbackward' | 'seekforward' | 'previoustrack' | 'nexttrack' | 'seekto' | 'stop'
ActionHandler
(details: ActionDetails): void