Project 05 · Audio observability

Accessible Observability

A trace viewer that gives OTLP spans an audio shape. The desktop app loads OTLP JSON, draws a waterfall, and keeps keyboard navigation in sync with sound.

What’s real here: browser port

What you can play with here is a reimplementation of the project’s core idea in browser technology. The real codebase differs. The real project is a Python desktop app with PySide6 and pyo. This page re-creates the trace navigation and sonification loop with bundled example traces, Canvas, and the Web Audio API.

The real thing lives on GitHub.

A browser port of the trace sonification loop: focus spans with Previous and Next, jump errors, scrub the timeline, or sweep through the trace. depth → pitch · service → voice · time → stereo.

How a trace becomes sound

Depth
Pitch rises by tree level
Service
Stable pluck, pad, or bell voice
Duration
Longer spans ring longer
Timeline
Stereo position follows time
Errors
Dissonance and noise transient

Example traces

01 checkout Four spans, one error, quick smoke test
02 error-cascade Failure propagation up four services
03 fanout Parallel calls with one audible straggler
04 n-plus-one Repeated DB spans as a stutter pattern

Why it exists

Distributed traces already have structure: parent spans, child spans, overlapping work, slow edges, and error cascades. This project maps that structure to sound so a trace can be explored without relying only on the waterfall.

The desktop app has two ways of moving through a trace. Navigate mode walks the call tree one span at a time. Scrub mode moves a playhead through time and sustains every span under it. The same focus state drives the waterfall and the audio engine.

What it is

Accessible Observability is a desktop experiment for exploring distributed traces by ear. It loads OTLP JSON, draws a waterfall, and keeps the current span and playhead synchronized between the visual view and the audio engine. Navigate mode moves through the span tree. Scrub mode moves through time.

Demo vs. the real thing

The browser demo uses four bundled story traces: checkout, error-cascade, fanout, and n-plus-one. It keeps the same basic model as the desktop app: focus spans, jump to errors, scrub the timeline, and listen for structure. The desktop app loads real OTLP JSON and uses PySide6 with pyo; this page is a compact Web Audio and Canvas port.

Stack
Python · PySide6 · pyo · OTLP JSON
Status
Desktop app; the demo above is a compact browser port
Why
Observability for ears, not just eyes
View on GitHub