feat(ms-yey): custom audio player — full tracks + per-track artwork - #10
Draft
1marcelserrano wants to merge 5 commits into
Draft
feat(ms-yey): custom audio player — full tracks + per-track artwork#101marcelserrano wants to merge 5 commits into
1marcelserrano wants to merge 5 commits into
Conversation
Single-file player explorations for the MS YEY AI music album, built on the MSCREATIVE.SYSTEMS DS (MS Midnight tokens, Fraunces/Inter Tight/IBM Plex Mono). Variant switcher toggles 3 distinct directions: - 01 Editorial: liner-notes / magazine vertical layout - 02 Immersive: cinematic full-bleed hero with glass player card - 03 Console: compact studio-rack / terminal widget Hybrid approach: custom UI (data-driven tracklist, editable ALBUM array) + official Spotify embed per variant for real audio playback.
Inlines the MS Midnight DS tokens + reset/grid base so the file renders when opened directly via file:// or any static host, with no dependency on ../../css/. Google Fonts + Spotify embed still load over network and degrade gracefully. Same 3 variants and editable ALBUM array as the DS-linked version.
Adds one cover per track: each track gets a thumbnail in all three variants, and the artwork is fetched client-side from Spotify's oEmbed endpoint using each track's own link (track/single/album), falling back to the album cover, then to the monogram. Track data model gains a per-track 'spotify' link field (and optional 'cover' override). Standalone file regenerated to match.
Promotes the approved variant 01 (Editorial / liner-notes) to the official, self-contained player at studies/ms-yey/player.html: inlined MS Midnight tokens, per-song cover art auto-pulled from Spotify (oEmbed), editable ALBUM data, and the official Spotify embed for real audio. Removes the 3-variant exploration files (player-mockups.html and player-mockups-standalone.html); both remain available in git history.
Replace the Spotify iframe embed with a self-hosted HTML5 audio player so tracks play in full and the hero artwork follows the playing song. - Transport controls: play/pause, prev/next, seekable progress bar, time - Now-playing cover cross-fades to each track's art on change - Active track row highlighted with animated equalizer indicator - Auto-advance to next track on end - Per-track audio via audio/NN.mp3 convention (drop files, no code edits) - Per-track covers auto-pulled from Spotify oEmbed (spotify field) - Graceful state when audio files are not yet present
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
1marcelserrano
added a commit
that referenced
this pull request
Jun 22, 2026
… Codex pipeline) Item #10 LEARN. Reverte a parte 'fora do repo' da DEC-018/114e4de: o pointer apontava pra KNOWLEDGE/ (gitignored) = entregável sem backup em git. Agora a spec textual mora em docs/, versionada. KNOWLEDGE/ vira working copy de upload (Claude Design), espelhada daqui. CANONICAL_REFERENCE + CHANGELOG repontados. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Por quê
O player anterior usava o embed do Spotify (iframe), que tem duas travas da plataforma:
Ambos os pedidos do MS YEY (música completa + imagem que troca por faixa) exigem player próprio.
O que mudou
Troquei o embed por um player HTML5
<audio>self-hosted:spotify:por faixa).Como plugar o áudio
Estrutura pronta — é só dropar os arquivos em
studies/ms-yey/audio/(01.mp3,02.mp3…) seguindo a convenção emaudio/README.md. Sem editar código. Enquanto não há arquivos, o player mostra estado gracioso e a arte/capas já funcionam.🤖 Generated with Claude Code
https://claude.ai/code/session_012wDBZUbDjvcmw2iM4fc1CF
Generated by Claude Code