Leather and brass music player

Create a complete now-playing screen with brushed metal, stitched leather and brass controls, distinguishing audio from demo behavior. A compact direction to help the next screen feel deliberate, specific, and easy to remix.

Create a complete leather-and-brass skeuomorphic now-playing Web prototype with HTML/CSS/necessary JS, not material recommendations alone. Suitable for music, podcasts or audiobooks; no new streaming service.

INPUT
Content: [product, track/program title, credited creator, description]
Assets: [authorized artwork and local/accessible audio path; say none if unavailable]
Capabilities: [play/pause, seeking, volume; actual multi-track list, favorites or lyrics]
Constraints: [language, available fonts, phone width or existing page; or none]

MISSING INFORMATION
Ask at most three blocking questions. Missing art can use original abstract placeholder shapes. Without audio explicitly label “interface demo”; no fabricated playback state, duration or lyrics. Preserve credits. Unknown duration stays unknown. Report inaccessible media rather than bypassing restrictions.

METHOD
1. Build product/back area, cover with a vinyl edge, title/creator, progress/time, transport controls, volume and actually available auxiliary entries. Around 400px on phones, centered on desktop, shrinking to narrow containers. Wrap long titles and scroll naturally instead of clipping a fixed-height screen.
2. Use one top light source. Graphite chassis #262A31 to #111318 with weak brushed texture; leather #4A2C1E to #23110B with restrained grain and #C99A5B stitch; brass #FFDD9A highlight, #E0A94E base, #A9772F shadow. Warm #EFE7D8 text and available monospace time digits. Recessed channels, raised knobs, bevel highlights and pressed states establish physical depth. No excessive glow/blur obscuring copy.
3. With audio, use browser audio after user interaction. Derive progress/duration from actual metadata/timeupdate; handle loading/play rejection. Seek only when duration is finite and positive. Keyboard-operable range sliders for volume/position; note platform limits on volume. No autoplay or audio upload.
4. Without audio, disable real playback/seeking and visibly label the demo. Visual pressed-state demonstrations cannot claim playback success. Enable previous/next only with actual multiple tracks. Omit or clearly disable unsupported lyrics, device or casting controls. Disclose scope of local favorite toggles instead of implying account sync.
5. Named icon controls, visible focus, non-color states and touch targets at least 44px. Check 390px/1440px, long titles, missing/failed media and zero/unknown duration. Reduced motion disables decorative rotation. Evaluate actual contrast and boundaries; mark unexecuted checks pending.

DELIVER
A. Structure, material direction, audio conditions and behavior boundaries.
B. Complete index.html code block with inline CSS/necessary JS and replaceable media paths. Original CSS/simple SVG textures, no unknown asset sources.
C. Control/verification table: name / implementation condition / local behavior or disabling reason / measured or unverified.

A design does not establish streaming, Bluetooth, AirPlay, paid playback or licensing services. Claim only implemented and verified behavior.
Site adaptation of Jason Zhou / Superdesign, Leather and Brass Now Playing (prompt text CC0-1.0). Adds media states, no-audio fallback and complete-page code; no source album images or font files reused: https://github.com/superdesigndev/superdesign-prompts/blob/6c60906945208df5aa2187f19f8ddfe9b2948aa0/prompts/skeuomorphism-music-player-tactile-leather-and-brass-now-playing-ui/README.md .

fake playback without audio, invented duration, unknown media paths, autoplay, fake lyrics/casting, color-only states, inaccessible knobs, fabricated media tests