Sandy Sounds
Web audio/visual media player to showcase client’s music.
- WebGL
- Javascript
- Vue.js
The band Sandy reached out to me in 2021 after finding a video I posted showing my open-source OpenGL audio visualizer code. They wanted me to help build a website to showcase their music as a multi-media experience player syncing their music, video, and a realtime oscilloscope audio visualizer. At the time I was working for FAW on SubLabXL and working on MoveMusic in my free time, so I was not able to take on the project alone. But, my wife, McKenna, is an experienced designer and had experience with HTML/CSS so I asked her if she wanted to take on the majority of the project. McKenna committed to the project and worked with Sandy to design the website from scratch. She then coded the UI and main page structure of the site in HTML/CSS.
The finished website we created at sandy-sounds.com
My Contributions
My main contribution to the project was porting my open-source OpenGL audio visualizers to WebGL so they could run in the browser. This required optimizations such as limiting the number of drawn line-segments which make up the audio wave to support mobile browsers with WebGL limits. To keep it efficient, the oscilloscope ran as a single-pass fragment (pixel) shader with only quad geometry and achieved glow using Signed Distance Fields (SDFs) instead of traditional bloom techniques. We tweaked the visual to have neon-like overexposure of the glowing line trace, and added a subtle grid to the background to make it feel more like a real oscilloscope hardware unit. I used three.js as the WebGL framework in tandem with JavaScript media APIs to get the realtime audio data into the WebGL visualization.
Additionally, I inserted McKenna's HTML/CSS code into a Vue.js project so we could easily handle UI state and interaction with media player functionality. I also added support for the Media Session API to support playback/navigation of the website's media from native media widgets on various platforms such as iPhone, Android, and Google Chrome.
iPhone Web Media Widget
Google Chrome Web Media Widget
We finished the project and launched the site in 2022. The members of Sandy, Jeff and Stephen were a pleasure to work with. If you're looking for music for film, TV, podcasts, etc, definitely reach out to them at [email protected].