Media Session API Playground

Build metadata, configure action handlers, and integrate with OS media controls

Checking Media Session API support...

Detecting browser capabilities

Integrated Audio Player

Play audio with full Media Session integration. OS media controls will reflect the current track.

🎵

No track selected

Select a track to begin

0:00 0:00
[ready] Player initialized. Select a track or use the Metadata Builder.

Metadata Builder

Configure MediaMetadata properties. Changes apply to the active media session in real-time.

Artwork

Add artwork in various sizes. Browsers pick the best match for the display context.

Action Handlers

Toggle handlers for media session actions. Enabled handlers will respond to OS media controls.

Custom Seek Offset

[info] Toggle handlers and click Apply to register them.

Position State Management

Control playback position reported to the OS. setPositionState() updates scrubbers in OS media controls.

0s
Duration
3:00
Position
0:00
Rate
1.0x

OS Media Controls Preview

Simulated preview of how your metadata appears in OS-level media controls.

Desktop Notification Style
🎵
No metadata
Apply metadata first
Lock Screen Style
🎵
No metadata
Apply metadata first

Generated Code

Copy this code to integrate Media Session API into your own project.

Full Integration Code

// Apply metadata and handlers first to generate code.