Repositorio publicado en https://salempro123a-sudo.github.io/
La identidad gráfica procede de la primera versión editorial inspirada en la composición de NTS Radio (recuperable en Git history desde el commit 1da6e7b8b69bab262d7ea4590db678709e7f7eb5). No debe sustituirse por un reproductor genérico: conservar la portada, la barra superior, la columna de mixtapes, las tarjetas, el bloque abstracto, las colecciones y el cierre editorial.
index.html: página principal y estructura visual.spotify-auth.js: inicio de sesión mediante Authorization Code con PKCE, permisos mínimos y renovación de token. Por ser una aplicación estática, se guarda la sesión de Spotify en el almacenamiento local del propio navegador; una vulnerabilidad XSS podría exponerla. No se guarda ninguna credencial en GitHub.spotify-editorial.js: fuentes separadas para la colección pública del propietario y la reproducción privada de cada visitante; carátulas, búsqueda, playlists, estación de canciones, reproducción por SDK.spotify-controls.jsyspotify-controls.css: controles de volumen, transporte, cola, dispositivos, repetición, aleatorio, progreso y diagnóstico.musica.html: única página de retorno OAuth; no es una página musical alternativa.featured.json: selección pública autorizada; mientras tengastatus: pending_authorization, la web no puede mostrar canciones reales del propietario a usuarios sin sesión.
- Abrir https://salempro123a-sudo.github.io/ y conectar con Spotify Premium mediante el botón oficial.
- La cuenta principal tendrá un control discreto en la sección final de la web: PREPARAR PORTADA PÚBLICA.
- Revisar la información que se compartirá. Se incluyen canciones y artistas principales, y únicamente playlists marcadas públicas en Spotify. Las escuchas recientes son opcionales y están desactivadas por defecto.
- Descargar el archivo
featured.json. Entregarlo para sustituir elfeatured.jsondel repositorio mediante un commit a la ramamain. - Los invitados sin cuenta verán el archivo de metadatos público. Para escuchar dentro de nuestra web, deberán autorizar su propia cuenta Premium.
Importante: jamás incluir refresh tokens, access tokens, Client Secrets ni credenciales en featured.json. El archivo generado contiene solo metadatos musicales destinados a ser públicos.
GitHub Pages es alojamiento estático. No puede leer en segundo plano la cuenta del propietario cuando este tiene la web cerrada. Para hacer que «Estoy escuchando ahora» se actualice automáticamente para visitantes sin cuenta, hace falta una función programada en un servicio seguro externo que refresque una autorización del propietario y publique solo la información aprobada (no tokens). La instalación y la autorización de ese servicio no están activadas en este proyecto.
La API de Spotify de las aplicaciones nuevas no permite acceder a las recomendaciones algorítmicas antiguas, análisis de audio ni letras completas. Para mostrar letras dentro de la web necesitaríamos derechos de un proveedor licenciado, como Musixmatch; no reutilizar interfaces internas o no oficiales de Spotify.
- Confirmar Redirect URI exacta
https://salempro123a-sudo.github.io/musica.htmlen Spotify Developer Dashboard. - Conectar la cuenta y aceptar los permisos nuevos, especialmente
streaming. - Comprobar el menú DIAGNÓSTICO DEL REPRODUCTOR; Spotify debe reconocer Premium, el SDK y un dispositivo activo.
- Pulsar directamente ▶ en una canción real (gesto necesario en algunos navegadores).
- Comprobar volumen, pausa, avance, anterior/siguiente, repetición, aleatorio, cola y dispositivos.
- En otra cuenta Premium autorizada, verificar que sus canciones privadas no alteran la portada del propietario.
- En una ventana de incógnito sin Spotify, verificar la colección pública publicada en
featured.json.
No afirmar audio verificado solo con pruebas de sintaxis: requiere una sesión Premium real.
favicon.svg: monograma original T/M para pestañas, en blanco y negro con un pequeño detalle amarillo verdoso. Enlazado desdeindex.htmly la devolución OAuth.- Reproducción: si Spotify Web Playback SDK no permite activar un dispositivo o falla una operación, el botón de canción/playlist abre un Spotify Embed oficial dentro de la misma página. No se presupone que el streaming ya fue comprobado con una cuenta Premium real.
- Playlists compartidas: la URL de la página con
?playlist=<ID de 22 caracteres>abre el embed oficial incluso sin autorizar nuestra aplicación. Esto no proporciona automáticamente el perfil o biblioteca completa del propietario a quien entra anónimamente. - Letras: se reemplazó el enlace engañoso de «letras» por Ver letras en Spotify (abre la canción dentro de Spotify). No hay un endpoint oficial de letras en Spotify Web API; mostrar letras en la web exigiría acuerdos con un proveedor autorizado.
- Sesión:
spotify-auth.jsrecuerda la autorización enlocalStoragey usasessionStoragede respaldo cuando el navegador impide la persistencia. El propietario debe usar dispositivos de confianza para este token; pueden eliminarse mediante desconexión. - Carátulas: la portada no rota automáticamente; intenta separar artistas y álbumes repetidos al componer la cuadrícula. Dos canciones del mismo álbum pueden legítimamente compartir imagen.
- Diagnóstico: tres scripts principales analizados sintácticamente, todas las referencias DOM comprobadas, simulados los estados público/propietario/invitado y el flujo de transferencia y reproducción del SDK con respuestas sintéticas. No se afirma que se haya oído audio real, ni que GitHub Pages haya sido abierto desde el entorno de desarrollo.
Para disponer de canciones propias visibles en la portada sin inicio de sesión, sigue pendiente publicar una selección autorizada del propietario en featured.json; no puede extraerse su biblioteca privada desde solo el enlace público del perfil debido a restricciones de Spotify 2026.
Se conserva la composición original: portada, controles, rail, cuadrículas, bloque abstracto, colecciones, historial, sección de compartir y pie. Los metadatos ficticios o repetidos se han reducido.
- Para ahora: selección determinista que prioriza las reproducciones recientes, después las canciones más escuchadas de las últimas semanas y las guardadas. Con sesión autorizada, puede añadir algunos temas encontrados mediante Spotify Search para artistas escuchados recientemente. No usa ni reproduce el algoritmo cerrado de recomendaciones de Spotify. Se limita a dos consultas de búsqueda de artista por activación y mantiene los resultados temporalmente en memoria.
- Me gusta: consulta
GET /me/tracksbajo el permisouser-library-read, con paginación por lotes. Se muestra una cuadrícula de carátulas original y, cuando no hay playlists, puede completar el rail con canciones guardadas. - Sin datos de clasificación: las carátulas de guardados pueden ocupar la portada, sin canciones inventadas.
- Portada pública:
featured.jsonpuede contener la propiedadliked; solo se incorpora al archivo de exportación del propietario si este selecciona explícitamente la casilla «Incluir mis canciones guardadas». Continúa siendo necesaria la subida posterior del archivo a GitHub. En esta revisiónfeatured.jsonsigue en estadopending_authorization; no afirma mostrar automáticamente gustos del dueño a visitantes anónimos. - Reducción de tráfico: la vista de favoritos reutiliza el estado ya cargado por el reproductor principal en lugar de duplicar todas las consultas de Top Tracks y escucha reciente.
- Pruebas: se comprobaron sintaxis y referencias de DOM; en simulaciones de propietario se cargaron carátulas y se calculó la secuencia reciente. También se verificó que una cuenta invitada no sustituye los títulos de la portada pública. Spotify real y el audio en el navegador del usuario quedan por validar.
La opción «Para ahora» no representa «Spotify Radio», «Discover Weekly», «DJ», «Smart Shuffle» ni otro algoritmo privado. Consultar esas recomendaciones mediante la API de una aplicación nueva no está permitido por las restricciones de noviembre de 2024. Spotify Search únicamente permite explorar el catálogo mediante criterios explícitos.
- El estado y los errores del reproductor ya no se imprimen debajo del reproductor; los últimos 15 errores se almacenan solo en memoria de la pestaña y están disponibles en «Más opciones → Diagnóstico». No se guardan tokens ni contraseñas en ese registro.
spotify-auth.jsvalida respuestas de la Web API antes de intentar interpretarlas como JSON; una respuesta no JSON genera un error manejado, sin mostrar el texto crudo de la API.spotify-library.jsañade navegador editorial de listas con búsqueda, filtro por nombres de radios/mixes y paginación de hasta 50 playlists por petición. No garantiza acceso a las radios algorítmicas de Spotify que no se exponen enGET /me/playlists.spotify-polish.cssyspotify-polish.jsconservan la estructura original y ralentizan el marquee (95 s), rotaciones decorativas y punto rojo. La luz responde a reproducir/pausar, NO al BPM real: la API/SDK no entregan señal PCM ni pulso de audio para esa función.- En sesión del propietario, los artistas del bloque verde y el historial reciente se actualizan con una nueva escucha detectada por
GET /me/player; mientras la web esté cerrada no existe sincronización pública en tiempo real sin backend independiente. - «Otras canciones» y «Sorpréndeme» construyen una rotación distinta con los datos actuales y, si hay permiso de catálogo, buscan más temas en distintas páginas de resultados de artistas recientes y discos. Evitan propuestas ya ofrecidas mediante una lista acotada almacenada en el navegador. No afirman ser Spotify Radio ni Spotify Recommendations.
- Se retiraron etiquetas editoriales redundantes, explicaciones dirigidas al dueño, subtítulos duplicados, números ficticios y la frase de cierre que no aportaba contenido.
- Validación: scripts analizados sin errores de sintaxis, ids y enlaces internos resueltos, simulación de cuenta autorizada que carga carátulas, favoritas, 50 playlists y reproduce el estado play/pause; simulación de la paginación con la solicitud
/me/playlists?limit=50&offset=50. - A fecha de esta revisión, suma de los 13 archivos principales HTML/CSS/JS/SVG/JSON: 145 340 bytes (141,9 KiB);
index.html: 55 765 bytes (54,5 KiB). Excluye fuentes, carátulas y recursos de Spotify de terceros. El tamaño informado por GitHub para el repositorio completo es aproximadamente 680 KB, incluyendo datos no equivalentes al peso transferido en una visita.
El despliegue público y el audio real necesitan comprobación desde una sesión Premium autorizada en un navegador. La selección pública del propietario sigue requiriendo featured.json autorizado, que no ha sido recibido ni publicado (status: pending_authorization).
- «Para ahora» ya no fija como primera canción la favorita con mayor puntuación (el fallo de «Rock DJ»). Alterna inicios, almacena localmente una lista limitada de inicios recientes y explora canciones no guardadas, pistas de álbumes y artistas colaboradores que aparecen en los créditos musicales de Spotify. No accede al algoritmo privado Spotify Radio ni promete calidad idéntica al algoritmo oficial.
- Los datos de la biblioteca y reproducción siguen perteneciendo a la cuenta autorizada. Para visitantes sin login continúa pendiente la publicación consentida de
featured.jsondel propietario. - El navegador de playlists tiene detalle interno. En listas propias o colaborativas obtiene canciones mediante
GET /playlists/{id}/items(Spotify Developer API, restricciones 2026), con paginación, y selecciona una pista porcontext_uri+offset.positionpara continuar la lista. En listas ajenas restringidas muestra un Spotify Embed oficial, no inventa la lista de canciones. - Los nombres de artistas del bloque verde abren un explorador modal que busca canciones reales del catálogo y permite reproducirlas; ofrece atribución/enlace al artista en Spotify.
- «Me gusta» muestra seis tarjetas por página en escritorio, tres o dos según pantalla. Flechas anterior/siguiente cambian el grupo sin desplazar la página hacia abajo; se ocultan cuando solo hay una página.
- Minirreproductor inferior izquierdo visible tras alejarse del principal, vinculado al mismo play/pause y volumen. La banda negra superior también incorpora volumen. El texto redundante de dispositivo permanece fuera de la vista y se consulta en Diagnóstico.
- Marquee amarillo vuelve a moverse a 43 s por ciclo; asterisco rota a 20 s; punto rojo parpadea suavemente cada 1,85 s cuando está sonando.
prefers-reduced-motiontiene precedencia y detiene el movimiento si así lo pide el sistema operativo. No se simula un falso ritmo musical. - Se conserva exactamente la organización editorial anterior: portada, rail, cuadrículas, bloque abstracto, colecciones y parte inferior.
- Pruebas: inspección estática de referencias e IDs, simulación de rotación con tres canciones durante seis sesiones (inicios alternados sin repetición inmediata), playlist propia con selección de pista n.º 2, playlist ajena 403 con iframe oficial, exploración de artista y minirreproductor; todas pasaron. El audio real y el despliegue de GitHub Pages no pudieron comprobarse con una sesión Premium desde este entorno.
- Cabecera: campo de búsqueda en línea con lupa y resultados seleccionables del catálogo Spotify; nombre real del perfil conectado, sin etiqueta fija «MI CUENTA». El sistema anterior de búsqueda en overlay permanece en el historial de código, no se invoca desde la lupa.
- Carrusel: contador real
n / Nrestaurado. Si el propietario está escuchando una canción externa a su rotación, se añade a la lista del carrusel y se mantiene coherente el contador. - Reproductor: barra blanca de audio fija inferior, inspirada en capturas NTS aportadas por el propietario, con carátula, canción/artista, pausa, cronología, control de avance, corazón y volumen; sincronizada con el player principal. Banda superior y reproductor inferior controlan la misma sesión de Spotify, no son dos transmisiones independientes. El punto rojo de estado ya no se elimina cuando se actualiza una canción.
- Favoritos:
spotify-favorites.jsusa los nuevos endpointsGET /me/library/contains,PUT /me/library,DELETE /me/librarycon la URI Spotify de la canción. El scopeuser-library-modifyse solicita desde OAuth; los usuarios autorizados con el scope anterior deben desconectar y volver a autorizar una vez. Me gusta se actualiza dentro de la vista personal del propietario. No se muestran tokens. - «Para ahora»: prepara una cola completa con artistas recientes, favoritas y descubrimientos y evita inicios idénticos. «Sorpréndeme» prioriza temas ajenos al conjunto familiar, y también envía una cola completa; no se presenta como el algoritmo de Spotify Radio.
- Carátulas y tarjetas: oscurecimiento al pasar el cursor, títulos sobre fondo negro en portada, hover en tarjetas y fuentes condensadas predominantes; se mantienen las secciones originales y los controles anteriores funcionales.
- Diseño y accesibilidad: menú de búsqueda responsive, indicador de estado discreto, preferencias de movimiento reducido y barra blanca inferior que reserva espacio para no tapar el pie de página. No se copian recursos ni código privado de NTS.
- QA estática y sintética realizada: prueba de tres URI enviadas a
PUT /me/player/play, estados de favorito y guardado, campo de búsqueda con resultados Spotify, contador y nombre de perfil. El sonido real y la disposición visual en el navegador del propietario siguen pendientes de comprobación directa. - Para un motor realmente colaborativo e independiente del catálogo personal se han evaluado Last.fm
track.getSimilar(requiere clave API) y ListenBrainzcf/recommendation(requiere historial importado/sincronizado y cuenta). No se han conectado porque esos datos y autorizaciones no están configurados; sería engañoso afirmar que ya funcionan.