Media Session API
The Media Session API allows web developers to customize the media notifications that appear on mobile devices, notification centers, and lock screens. It also allows handling media control events (like play, pause, seek, next track) triggered by hardware keys or headsets.
1. Setting Metadata
You can provide rich metadata about the media currently playing, such as the title, artist, album, and artwork. This information is displayed in the OS's media controls.
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Never Gonna Give You Up',
artist: 'Rick Astley',
album: 'Whenever You Need Somebody',
artwork: [
{ src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' },
{ src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
{ src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
{ src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
{ src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
{ src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
]
});
}2. Handling Actions
You can listen for media control actions using setActionHandler. This allows users to control your web app's media playback using hardware keys (keyboards, headsets) or software controls (notification area).
const audio = document.querySelector('audio');
if ('mediaSession' in navigator) {
// Play
navigator.mediaSession.setActionHandler('play', () => {
audio.play();
});
// Pause
navigator.mediaSession.setActionHandler('pause', () => {
audio.pause();
});
// Seek Backward
navigator.mediaSession.setActionHandler('seekbackward', (details) => {
const skipTime = details.seekOffset || 10;
audio.currentTime = Math.max(audio.currentTime - skipTime, 0);
});
// Seek Forward
navigator.mediaSession.setActionHandler('seekforward', (details) => {
const skipTime = details.seekOffset || 10;
audio.currentTime = Math.min(audio.currentTime + skipTime, audio.duration);
});
// Previous Track
navigator.mediaSession.setActionHandler('previoustrack', () => {
console.log('Playing previous track...');
// Logic to load previous track
});
// Next Track
navigator.mediaSession.setActionHandler('nexttrack', () => {
console.log('Playing next track...');
// Logic to load next track
});
// Stop
navigator.mediaSession.setActionHandler('stop', () => {
audio.pause();
audio.currentTime = 0;
// Clear metadata if needed
navigator.mediaSession.metadata = null;
});
}programming/javascript/vanilla/javascript programming/javascript/vanilla/events programming/javascript/vanilla/page-visibility-api