Alibi Music Library
- // Vue
- // Nuxt
- // SCSS
- // Sanity.io CMS
- // Webpack
- // View Live Site
A music licensing company needed more out of their platform. Alibi came to Magnetic Creative to build a custom web app that would give them a way to run their business and let clients find music for themselves at the same time.
Waveform visualization, BPM shifting via granular synthesis, and play queue state were just a few of the challenges I faced throughout the course of this build. In addition to these functional requirements, the frontend needed subtle animations and transitions to bring its design to life.
Waveform visualiziation was my favorite part of this build. The raw waveform data was daunting at first, but by normalizing and chunking the raw data into just the number of segments I needed for the 2D visualizer, I was able to implement the proof of concept pretty quickly. From then on, it was a matter of dialing it in and keeping it synced with the audio between window resizes, track changes, playing/pausing, etc.
Another challenge on this build was the complete disconnect of Track and Stem hierarchy that needed to happen in order to accomplish some of the frontend features on Album and Playlist pages.
The literal hierarchy was that stems belonged to tracks and tracks belonged to albums. Playlists only cared about tracks, and didn’t require the concept of an album. But eventually, a feature request came across to have stems show as top-level items on Album pages to make discovery easier. In hindsight, a flatter hierarchy would’ve made that easier, but it also probably would have made those more traditional relationships a bit trickier. Pick your poison type of scenario, I guess.