tarjetas-musicales

Tarjetas musicales NFC/QR — motor de OneTapMusic

“OneTapMusic” es la marca comercial del producto (de cara al cliente). El nombre técnico del repositorio y la URL publicada (tarjetas-musicales) no se cambian — ya están grabados en los QR/NFC ya emitidos, y renombrarlos los rompería.

Sistema para generar tarjetas (cumpleaños, fiestas, presentación de eventos, regalos musicales) que al escanear el QR o acercar el celular a un tag NFC, abren una página que arranca la música automáticamente.

Para armar una tarjeta nueva paso a paso, seguí MANUAL.md. Este README es la referencia rápida de cada script.

Cómo funciona

  1. (Opcional) Corrés scripts/buscar-disco.js con el link de Spotify del disco para traer automáticamente la portada y la lista de temas.
  2. Generás una tarjeta con el script scripts/generar-tarjeta.js, indicando el título, mensaje, tema visual y el archivo de audio (más los datos del disco si los tenés).
  3. Eso crea una carpeta en cards/<slug>/ con una página HTML5 autocontenida + el audio.
  4. Publicás el sitio (gratis) en GitHub Pages o Netlify.
  5. El script te da la URL final y te genera el QR (qr.png).
  6. Escribís esa misma URL en un tag NFC con una app como NFC Tools (Android/iPhone) — se graba como un registro “URL/URI”.
  7. Al escanear el QR o acercar el celular al NFC, se abre la página y la música arranca sola (si el navegador bloquea el autoplay, aparece un botón grande “Toca para escuchar”).

Buscar los datos de un disco automáticamente

node scripts/buscar-disco.js --spotify "https://open.spotify.com/album/XXXXXXXX" --out nombre-carpeta

Descarga la portada oficial y la lista de temas (con su ID de Spotify, para que cada tema se pueda escuchar individualmente en la tarjeta) en assets/nombre-carpeta/, y te imprime el comando de generar-tarjeta.js ya armado con esos datos.

Generar una tarjeta

node scripts/generar-tarjeta.js \
  --slug juan-30 \
  --titulo "¡Feliz cumple, Juan!" \
  --subtitulo "Feliz cumpleaños" \
  --mensaje "Que este año esté lleno de música y buenos momentos." \
  --tema cumpleanos \
  --audio "C:\ruta\a\cancion.mp3"

Temas disponibles: cumpleanos, fiesta, evento, regalo.

--baseUrl es opcional: por defecto usa https://onetapmusic.com.ar (el dominio ya publicado), así que no hace falta pasarlo. Usalo solo si querés generar el QR contra otro sitio (por ejemplo uno de prueba).

Probar localmente antes de publicar

Generá una tarjeta con --slug prueba (o el nombre que quieras) y después:

node scripts/dev-server.js

Abrí http://localhost:5173 en el navegador para ver cómo queda antes de subirla. (El script sirve la carpeta cards/prueba; si usaste otro slug, editá root en scripts/dev-server.js.)

Publicar gratis (GitHub Pages)

  1. Creá un repositorio en GitHub (por ejemplo tarjetas-musicales) y subí esta carpeta: 
    git init
git add .
git commit -m "Tarjetas musicales"
git branch -M main
git remote add origin https://github.com/TU-USUARIO/tarjetas-musicales.git
git push -u origin main
  2. En GitHub: Settings → Pages → Source: rama main, carpeta / (root).
  3. GitHub te da la URL pública, algo como https://tu-usuario.github.io/tarjetas-musicales/. Esa es la --baseUrl que usás al generar cada tarjeta.

Alternativa: Netlify

Arrastrás la carpeta del proyecto a app.netlify.com/drop y te da una URL al instante. Sirve igual de bien para este uso.

Grabar el tag NFC

  1. Instalá una app gratuita de escritura NFC (ej. NFC Tools en Android o iPhone).
  2. Elegí “Escribir” → agregar registro tipo URL/URI.
  3. Pegá la URL exacta de la tarjeta (la misma que el QR).
  4. Acercá el tag NFC (una calcomanía o tarjeta con chip NFC) y grabá.
  5. Probá acercando el celular al tag: debería abrir la página directamente.

Los tags NFC tipo NTAG213/215/216 son baratos y se consiguen como stickers o tarjetas plásticas; tienen memoria de sobra para guardar solo una URL.

Tarjeta de discografía completa (varios discos de un artista)

Distinto caso de uso, script separado — scripts/generar-discografia.js. Se usa cuando querés regalar toda la carrera de un artista (no un disco puntual):

node scripts/generar-discografia.js \
  --slug artista-discografia \
  --artista "Nombre del Artista" \
  --tema regalo \
  --albumes "assets/artista/albums.txt" \
  --youtube "https://youtube.com/@canaloficial"

El archivo de --albumes tiene una línea por disco: Título|Año|LinkDeSpotify. El script busca automáticamente la tapa y la lista de temas de cada uno. --youtube es opcional y solo debe usarse con un canal oficial verificado (nunca de fans). --baseUrl también es opcional (default https://onetapmusic.com.ar), igual que en generar-tarjeta.js. Ver el manual para el detalle paso a paso.

Notas sobre el audio