Introducing The Cosmic Selector: An Innovative Web Experience Merging Music, Technology, and Design
Imagine a digital jukebox that combines the tactile experience of physical media with cutting-edge web technology. The Cosmic Selector is a groundbreaking web application crafted for the band Lord Huron, offering fans a unique way to connect with their latest album.
How It Works
Fans who attend concerts or receive mail orders might find themselves holding a specially crafted NFC-enabled coin. By simply scanning this coin with a compatible smartphone, users can instantly access and listen to select tracks from the band’s new record. This interactive experience transforms passive listening into an engaging event, with all users on the site able to hear what’s currently playing—similar to gathering around a vintage jukebox in a cozy bar.
Behind the Scenes
This immersive experience was built using Vue.js and Nuxt.js, hosted seamlessly on Netlify. The visual centerpiece, a 3D modeled jukebox, was created in Blender and brought to life on the website with Three.js. To enable real-time updates and synchronization, Pusher’s service powers dynamic interactions, ensuring everyone’s experience remains seamless.
Innovative NFC Integration
A key feature of The Cosmic Selector is its custom NFC minting process. Each physical coin is embedded with a unique URL stored on an NFC chip. Using the NFC API, the system efficiently generates and assigns these coins in DynamoDB, allowing for a one-to-one relationship between the physical token and a digital playback link. This ensures that each coin grants access to a single song play, maintaining exclusivity and adding a collectible aspect.
To manage song requests and ensure orderly playback, I developed a queuing algorithm leveraging AWS Lambda. This setup guarantees that each song selection is processed fairly, creating a smooth and enjoyable listening experience for all users.
Learn More
For a visual look at the physical NFC coins, visit: Instagram Post
And to explore the web application itself, see: Instagram Post
Feel free to reach out if you’re curious about any particular aspect of this project. Whether it’s the NFC integration, real-time synchronization, or 3D modeling, I’d be happy to share more insights.
