Soundcore MASR H5

Soundcore MASR Experience H5

A full-stack H5 + serverless platform engineered for Soundcore's offline MASR (Multi-dimensional Audio Spatial Recording) experience event in London — bridging the on-site Unity recording stations with a mobile-first web playback page that visitors take home in their pocket.

Project Overview

For Soundcore and Catalyst agency, Hyperyond designed and shipped the full-stack platform behind the MASR event. End to end, the mechanic works like this:

1. A visitor records audio at an on-site Unity station.
2. Unity calls Hyperyond's upload API and receives a freshly generated, scannable QR code.
3. Unity displays the QR on its screen; the visitor scans it with their phone.
4. The QR resolves to a custom H5 page where the visitor plays back, downloads, and shares their recording.

The design point of the system was to deliver a fluid, install-free handoff between professional on-site capture and consumer-grade mobile playback — a small UX detail that makes the difference between a forgettable booth and a sharable moment.

Role Division: Catalyst led brand experience and event design, and brought in a Unity team for the on-site recording stations. Hyperyond owned the full-stack web platform — the API, the storage layer, the H5 itself — and the Unity-to-Web bridge protocol that connects the two halves.

Technical Solutions

• Unity-to-Web bridge. A clean REST API that accepts an audio upload from a Unity station and returns a short-lived, single-use QR code resolving to the visitor's playback page. No backend logic on the Unity side beyond the API call.
• Serverless storage and delivery. Cloudflare R2 for audio storage, Vercel functions for the API — chosen over an S3 + AWS stack for clean operational simplicity, fast cold-start behavior under live event pressure, and predictable cost.
• Audio processing pipeline. Initial implementation tried to run FFmpeg in-process inside Vercel functions, but hit the serverless platform's binary-size and execution constraints. We pivoted within hours to Rendi, a specialist FFmpeg-as-a-service API, rather than fight the platform — keeping the project on schedule and the runtime profile clean.
• Mobile-first H5 playback. A Next.js page tuned for fast first-paint on phones the visitor pulls out of their pocket immediately after scanning, with reliable audio playback across iOS Safari and Android Chrome.
• Downloadable artifact. The recording can be downloaded directly from the H5, so visitors leave with a tangible souvenir from the event.

Technical Achievements

• Ran flawlessly through the live London event — a category of project where any backend hiccup is immediately visible to the visitor and to the brand on the floor.
• Delivered the Unity-to-Web handoff as a clean, decoupled protocol — low-friction for the Unity team to integrate, low-blast-radius for either side to update independently.
• Made the right call on FFmpeg early — recognising the in-process approach wasn't worth fighting the platform for, and pivoting to a specialist API kept the project on schedule.
• Shipped on a serverless stack with effectively zero ongoing operational cost between events.

Technologies Used

• Next.js (frontend H5)
• Vercel Functions (serverless API)
• Cloudflare R2 (audio storage)
• TypeScript
• Web Audio API (playback)

Technical Implementation

For Catalyst agency and Soundcore, we provided:

• The full backend API (audio upload, QR issuance, playback retrieval)
• The Cloudflare R2 storage and delivery layer
• The Next.js mobile H5 (playback, download, share)
• The Unity-to-Web bridge protocol design and integration
• End-to-end technical support during the live London event