Brian Louis Ramirez (@screenspan.net, @screenspan@mastodon.green) is a web performance engineer at Speed Kit.
If you’re reading this, you probably have spent time looking over performance traces, flame charts, network logs and waterfall charts. The key word here is looking.
Paint timings like FCP and LCP, Interaction to Next Paint, Long Animation Frames – many of the metrics and APIs we use measure the visual experience of using the web.
But how does web performance sound?
Soundtrace is my creative stab at answering that. It processes HAR files in the browser and uses the Web Audio API to generate an audio representation of network resources loading during a page load.
Saving network logs as a HAR file, then uploading it to Soundtrace
Open up Chrome DevTools to the Network tab and surf over to any webpage. Then save the network logs HAR file. Upload it to Soundtrace, then play back the waterfall as a sequence of tones. Pro tip: throttle your network while recording a network trace for a longer audio experience with more subtlety.
Soundtrace is a work in progress. I would like to add features in the future:
- Audio representations of call stacks, flame charts or user timings from performance traces
- Controls for changing sounds, textures and tones
- Audio file export
- Looping
So for now, go save some network logs and head over to Soundtrace!
A shout out to Stoyan Stefanov, Henri Helvetica and Rick Viscomi for their inspiring handcrafted and AI-generated musical contributions to the web proof community.