Audio
This feature is not (yet) supported on your device
The Media Session API allows an app to display controls for media playback on a device's lock screen.
On a supporting device, play the audio below and then lock the device to see the controls appear on the lock screen.
if('mediaSession' in navigator) {
const player = document.querySelector('audio');
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Shadows of Ourselves',
artist: 'Thievery Corporation',
album: 'The Mirror Conspiracy',
artwork: [
{
src: 'https://ui79.com/src/img/media/mirror-conspiracy256x256.jpeg',
sizes: '256x256',
type: 'image/jpeg'
},
{
src: 'https://ui79.com/src/img/media/mirror-conspiracy512x512.jpeg',
sizes: '512x512',
type: 'image/jpeg'
}
]
});
navigator.mediaSession.setActionHandler('play', () => player.play());
navigator.mediaSession.setActionHandler('pause', () => player.pause());
navigator.mediaSession.setActionHandler('seekbackward', (details) => {
const skipTime = details.seekOffset || 1;
player.currentTime = Math.max(player.currentTime - skipTime, 0);
});
navigator.mediaSession.setActionHandler('seekforward', (details) => {
const skipTime = details.seekOffset || 1;
player.currentTime = Math.min(player.currentTime + skipTime, player.duration);
});
navigator.mediaSession.setActionHandler('seekto', (details) => {
if (details.fastSeek && 'fastSeek' in player) {
player.fastSeek(details.seekTime);
return;
}
player.currentTime = details.seekTime;
});
navigator.mediaSession.setActionHandler('previoustrack', () => {
player.currentTime = 0;
});
}