Project
Waveform Navigator
An open source lightweight React component for audio waveform visualisation and playback navigation. Supports responsive layouts, custom theming, markers, controlled playback, and ref-based programmatic control.
All projects
Waveform Navigator is a published npm package providing a feature-rich audio waveform component for React applications.
- My role: Sole author, designer, and maintainer.
- Key achievements: Published to npm, zero-dependency design (uses Web Audio API + Canvas), full TypeScript support, Web Worker peak computation, and comprehensive documentation.
- Technologies: React, TypeScript, Web Audio API, Canvas API, Web Workers, Vite, Vitest, Playwright.
- Features: Responsive waveform rendering, playhead navigation, markers support, custom theming via styles prop, ref-based API, keyboard accessibility, and controlled/uncontrolled playback modes.
- Impact: Provides developers with a simple drop-in component for audio waveform UIs without heavy dependencies.