~/todd-fleeman/case-study — session log entry

~/Frequency-reactive Visualizer

started 2026-09-13 · last touched 2026-09-15
pick a voice

Vidya Patil

Lucy Walters

Johnny DJ

Freddy Fender

Chris Cosell

0:00 / 0:00
Vidya Patil
Vidya Patil
Politician
why this exists

Description: While going through old projects, I found a proof of concept that utilized the HTML5 Audio API and D3Js to visualize sound frequencies.

I reworked it to analyze the same sound frequencies using canvas instead of D3. This makes it more lighweight and more performant.

I also created a hook for audio playback that can be reused in future projects that includes the Media Session Web Api that allows a web page to provide custom behaviors for standard media playback interactions, and to report metadata that can be sent by the user agent to the device or operating system for presentation in standardized user interface elements.

built on / learned
Web Audio API
Canvas
Learned

Learned: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit, diam a tristique eleifend, ligula eros sodales nisl, vitae fringilla est nisl a nibh. Curabitur sed lorem ut ante dictum bibendum sed eget lacus. Vivamus rutrum magna augue, pulvinar dictum sem malesuada eu. Sed vitae finibus ex. In vitae ullamco

where this might go

Future: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit, diam a tristique eleifend, ligula eros sodales nisl, vitae fringilla est nisl a nibh. Curabitur sed lorem ut ante dictum bibendum sed eget lacus. Vivamus rutrum magna augue, pulvinar dictum sem malesuada eu. Sed vitae finibus ex. In vitae ullamco