From 1a1062edeb9818b289f54ec9e7c259b429af4459 Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Sat, 4 Apr 2026 13:32:34 -0400 Subject: [PATCH] =?UTF-8?q?Website:=20Media=20Session=20API=20=E2=80=94=20?= =?UTF-8?q?background=20playback=20+=20lock=20screen=20controls?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Shows album art, title, artist on lock screen. Play/pause/next/prev from notification. Audio continues when phone screen is off. Co-Authored-By: Claude Opus 4.6 (1M context) --- site/index.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/site/index.html b/site/index.html index b085b38..53461f2 100644 --- a/site/index.html +++ b/site/index.html @@ -559,6 +559,25 @@ function playTrack(index) { document.getElementById('player-title').textContent = t.title; document.getElementById('play-btn').textContent = '⏸'; document.title = `▶ ${t.title} — Interpretations`; + + // Media Session API — background playback + lock screen controls + if ('mediaSession' in navigator) { + navigator.mediaSession.metadata = new MediaMetadata({ + title: t.title, + artist: 'Infinite State', + album: 'Interpretations', + artwork: [ + { src: 'cover.png', sizes: '1024x1024', type: 'image/png' } + ] + }); + navigator.mediaSession.setActionHandler('play', () => togglePlay()); + navigator.mediaSession.setActionHandler('pause', () => togglePlay()); + navigator.mediaSession.setActionHandler('previoustrack', () => prevTrack()); + navigator.mediaSession.setActionHandler('nexttrack', () => nextTrack()); + navigator.mediaSession.setActionHandler('seekto', (details) => { + audio.currentTime = details.seekTime; + }); + } } function togglePlay() {