Media Session API Controls — Free navigator.mediaSession Mini Player

Build a "media session controls" mini music player in plain HTML, CSS, and JavaScript using the real Media Session API (navigator.mediaSession.setActionHandler and MediaMetadata) — no libraries, no real audio file required.

Requirements:
- A mini player UI: album art placeholder, track title/artist/album text, a progress bar with elapsed/duration time, and play/pause/previous/next buttons, cycling through a small hardcoded playlist array (title, artist, album, duration in seconds).
- CRITICAL: the on-page player must be fully functional using ONLY ordinary page JavaScript (setInterval to advance elapsed time, DOM updates for the progress bar and button icons) with ZERO dependency on the Media Session API being supported — feature-detect with 'mediaSession' in navigator and gate only the OS-integration calls behind that check, never the core playback logic.
- On every track change and play/pause toggle, if mediaSession is supported, update navigator.mediaSession.metadata with a new MediaMetadata({ title, artist, album }) and set navigator.mediaSession.playbackState to 'playing' or 'paused', wrapped in try/catch since some contexts restrict MediaMetadata construction.
- Register real setActionHandler callbacks for at least 'play', 'pause', 'previoustrack', 'nexttrack', and 'seekto' (updating elapsed time from details.seekTime), each calling the SAME function the corresponding on-page button calls, wrapped in try/catch per call since individual action names can be unsupported and setActionHandler throws in that case.
- CRITICAL: in the UI copy and code comments, clearly explain that the Media Session API's actual effect — a lock-screen now-playing widget, a notification-shade media control, hardware media key routing — is entirely OS-level and cannot be rendered or simulated inside the page/iframe itself, so a developer or user should not expect to SEE anything different in the preview even when the API is fully wired and working; the only way to observe it is a real device's lock screen or hardware media keys against a real (non-sandboxed) page.
- Show a status note that states whether mediaSession is supported in the current browser/context, without implying that unsupported means the player itself is broken — the player must look and behave identically either way from an on-page perspective.