Kolossal Musical International
Caja digital interactiva tipo «cofanetto» con audio WAV de alta calidad y vídeo sincronizado al primer tap. Diseñada para iPhone Safari y desktop, con arquitectura preparada para clonarse en 14 ediciones país reutilizando el mismo núcleo.
Demo en vivo
Prototipo navegable: toca «Tap to open the box» para escuchar el audio sincronizado con la bailarina y cambiar entre ediciones país (EU · USA · IT · JP).
¿No suena en este iframe? Abrir la demo a pantalla completa.
Antes / Después
Qué cambia respecto al enfoque clásico de embeber YouTube o subir un MP4 «a pelo».
Antes
- Reproductor con controles de YouTube y branding ajeno.
- Autoplay bloqueado en iPhone Safari: el cliente ve la web «rota».
- Cada país requiere duplicar el proyecto y volver a tocar HTML.
- Vídeos pesados que cargan a la vez y matan el primer pintado.
- Cambiar una canción exige acceso al código y un nuevo despliegue.
Después
- Reproductor propio en HTML5: cero controles externos visibles.
- Audio y vídeo desbloqueados en el primer tap, sin trucos prohibidos.
- Cada edición país comparte el mismo núcleo; cambia el JSON.
- Assets servidos con cache, lazy load y poster ligero para arranque rápido.
- El cliente puede sustituir audio/vídeo subiendo a S3/Cloudinary.
Arquitectura
Frontend estático ultrarrápido + catálogo JSON + almacenamiento de media externo. Sin servidor de aplicación para la experiencia pública; admin opcional para la subida de assets.
Línea continua: carga directa. Línea discontinua: efecto asíncrono o publicación diferida.
Decisiones técnicas (y por qué)
Los detalles que separan un prototipo bonito de algo que aguanta producción multi-país.
Desbloqueo de audio dentro del gesto, sin trucos
Safari/iOS bloquea cualquier audio.play() y video.play() con sonido si no se invoca dentro del primer user gesture. La caja arranca con autoplay muted playsinline y, en el tap del CTA, lanza ambos play() en el mismo handler. No hay setTimeout ni promesas anidadas entre el tap y el play: si se rompe esa cadena, iOS bloquea. Resultado: música y vídeo sincronizados en el mismo instante.
HTML5 nativo, sin YouTube ni controles externos
Embeber YouTube ahorra trabajo, pero arrastra branding ajeno, banners legales, controles que el cliente no controla y políticas de autoplay aún más agresivas. Aquí se usa <video playsinline> + <audio> con UI propia, ocultando completamente la barra nativa y manteniendo la estética cinematográfica.
Catálogo JSON: una sola base, 14 ediciones
El frontend nunca sabe «cuántas canciones» ni «qué países» existen. Lee config.json al cargar y renderiza flags y pistas dinámicamente. Para lanzar una nueva edición país basta con clonar la carpeta, sustituir el JSON y los assets en S3/Cloudinary. Cero cambios en HTML/JS/CSS por edición.
Lazy load + cache buster por build
Solo el HTML, CSS y JS críticos van en el primer paint. El vídeo se precarga con preload="metadata" y se carga completo al abrir la caja. Cada despliegue cambia un BUILD que se añade como query a JS y media, garantizando que el cliente nunca vea una mezcla de versiones tras una actualización.
Subida de assets sin tocar código
El cliente no es un dev y no debe serlo. El admin opcional sube WAV y MP4 a S3/Cloudinary, recibe URLs y reescribe el JSON. La web pública lee el JSON en el siguiente refresh y muestra la nueva pista. No hay despliegue manual, no hay FTP, no hay tocar HTML.
Stack completo
Lo que hay realmente debajo de la caja.
Frontend
- HTML5 nativo (sin framework pesado)
- CSS moderno: gradientes, 3D transforms, animaciones
- JS vanilla modular
- Tipografía Cinzel + Inter desde Google Fonts
Audio · vídeo
- WAV 44.1 kHz / 16 bit estéreo
- MP4 H.264 1080p ·
playsinline - Desbloqueo en primer gesto de usuario
- Fallback Web Audio API si el WAV no carga
Catálogo
config.jsonversionado- Tracks, ediciones país y metadatos
- Esquema preparado para 14+ ediciones
- Cache
no-storeen JSON, sí en media
Media storage
- S3 o Cloudinary (intercambiable)
- CDN con range requests para vídeo
- Poster
.svgligero para arranque - Compatibilidad con HLS si se requiere
Hosting
- Nginx + TLS (Let's Encrypt)
- Archivos estáticos servidos directamente
- Cache-Control por tipo de recurso
- Despliegue por
scp+ reload
Admin opcional
- Subida de WAV y MP4 con autenticación
- Reescritura del JSON con auditoría
- Vista previa antes de publicar
- Roles: admin · vendor · ops
Resultado para el negocio
Para el equipo
- Lanzar una nueva edición país es un cambio de JSON, no un sprint.
- Sin dependencia de plataformas externas para el reproductor.
- Subida de pistas y vídeos sin tocar el código.
- Carga estable en iPhone Safari, sin sorpresas en demo.
Para el cliente final
- Experiencia cinematográfica al abrir la caja, sin pantalla en blanco.
- Audio nítido en alta calidad, sincronizado con la animación.
- Cambio inmediato entre ediciones país (flags activas).
- Funciona en iPhone, iPad y desktop con la misma URL.
¿Necesitas algo así?
Si tu producto necesita una experiencia interactiva premium con audio o vídeo, especialmente en iPhone Safari, y quieres que sea fácil de clonar para varios países, idiomas o ediciones, cuéntanos el contexto. Respondemos normalmente en menos de 30 minutos con viabilidad y siguiente paso.
Otros casos relacionados
GlobalKeyMarket — SaaS multi-vendor · WA_Tracker — Monitorización 24/7 · Ver todos los servicios
Servicios relacionados
Otros servicios relacionados
Pide presupuesto sin compromiso
Cuéntame brevemente tu proyecto y te respondo normalmente en menos de 30 minutos.