Kolossal Musical International
An interactive digital "cofanetto"-style box with high-quality WAV audio and video synced to the first tap. Designed for iPhone Safari and desktop, with an architecture ready to be cloned across 14 country editions reusing the same core.
Live demo
A navigable prototype: tap "Tap to open the box" to hear the audio synced with the dancer and switch between country editions (EU · USA · IT · JP).
No sound in this iframe? Open the demo full-screen.
Before / After
What changes compared with the classic approach of embedding YouTube or uploading a raw MP4.
Before
- A player with YouTube controls and third-party branding.
- Autoplay blocked on iPhone Safari: the customer sees a "broken" site.
- Each country requires duplicating the project and editing HTML again.
- Heavy videos that load all at once and kill the first paint.
- Changing a song requires code access and a new deployment.
After
- An in-house HTML5 player: zero visible external controls.
- Audio and video unlocked on the first tap, with no forbidden tricks.
- Every country edition shares the same core; only the JSON changes.
- Assets served with cache, lazy load and a light poster for a fast start.
- The client can swap audio/video by uploading to S3/Cloudinary.
Architecture
An ultra-fast static frontend + JSON catalogue + external media storage. No application server for the public experience; optional admin for asset uploads.
Solid line: direct load. Dashed line: asynchronous effect or deferred publish.
Technical decisions (and why)
The details that separate a pretty prototype from something that holds up in multi-country production.
Audio unlock within the gesture, no tricks
Safari/iOS blocks any audio.play() and video.play() with sound unless it is invoked within the first user gesture. The box starts with autoplay muted playsinline and, on the CTA tap, fires both play() calls in the same handler. There is no setTimeout or nested promises between the tap and the play: break that chain and iOS blocks. Result: music and video synced at the same instant.
Native HTML5, no YouTube or external controls
Embedding YouTube saves work, but it drags in third-party branding, legal banners, controls the client doesn't control and even more aggressive autoplay policies. Here we use <video playsinline> + <audio> with a custom UI, fully hiding the native bar and keeping the cinematic aesthetic.
JSON catalogue: one base, 14 editions
The frontend never knows "how many songs" or "which countries" exist. It reads config.json on load and renders flags and tracks dynamically. To launch a new country edition you just clone the folder, swap the JSON and the assets on S3/Cloudinary. Zero changes to HTML/JS/CSS per edition.
Lazy load + per-build cache buster
Only the critical HTML, CSS and JS ship in the first paint. The video preloads with preload="metadata" and loads fully when the box opens. Each deployment changes a BUILD appended as a query to JS and media, ensuring the client never sees a mix of versions after an update.
Asset uploads without touching code
The client isn't a dev and shouldn't have to be. The optional admin uploads WAV and MP4 to S3/Cloudinary, receives URLs and rewrites the JSON. The public site reads the JSON on the next refresh and shows the new track. No manual deployment, no FTP, no touching HTML.
Full stack
What's really under the box.
Frontend
- Native HTML5 (no heavy framework)
- Modern CSS: gradients, 3D transforms, animations
- Modular vanilla JS
- Cinzel + Inter typography from Google Fonts
Audio · video
- WAV 44.1 kHz / 16-bit stereo
- MP4 H.264 1080p ·
playsinline - Unlock on first user gesture
- Web Audio API fallback if the WAV doesn't load
Catalogue
- Versioned
config.json - Tracks, country editions and metadata
- Schema ready for 14+ editions
no-storecache on JSON, yes on media
Media storage
- S3 or Cloudinary (interchangeable)
- CDN with range requests for video
- Light
.svgposter for startup - HLS compatibility if required
Hosting
- Nginx + TLS (Let's Encrypt)
- Static files served directly
- Cache-Control per resource type
- Deployment via
scp+ reload
Optional admin
- WAV and MP4 upload with authentication
- JSON rewrite with auditing
- Preview before publishing
- Roles: admin · vendor · ops
Business outcome
For the team
- Launching a new country edition is a JSON change, not a sprint.
- No dependency on external platforms for the player.
- Uploading tracks and videos without touching the code.
- Stable load on iPhone Safari, no surprises in the demo.
For the end customer
- A cinematic experience when opening the box, with no blank screen.
- Crisp high-quality audio, synced with the animation.
- Instant switching between country editions (active flags).
- Works on iPhone, iPad and desktop with the same URL.
Need something like this?
If your product needs a premium interactive experience with audio or video, especially on iPhone Safari, and you want it easy to clone across several countries, languages or editions, tell us the context. We usually reply in under 30 minutes with feasibility and the next step.
Other related cases
GlobalKeyMarket — Multi-vendor SaaS · WA_Tracker — 24/7 monitoring · See all services