Skip to content

Sandy Sounds

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.

Screenshot from iPhone of media player UI playing one of the audio tracks from the Sandy Sounds website.

iPhone Web Media Widget

Screenshot of the Google Chrome web browser's media player UI playing one of the audio tracks from the Sandy Sounds website.

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].