videojs-wavesurfer

videojs-wavesurfer is a plugin for the Video.js media player that renders a navigable waveform for audio and video files using the wavesurfer.js library. Instead of a plain progress bar, viewers get a full waveform they can click and scrub through, giving audio-centric players a much richer, more informative interface.

The plugin integrates directly with Video.js’s control bar and event system, and adds capabilities such as fullscreen mode and real-time visualization of live microphone input. It is a drop-in enhancement for teams already using Video.js who want waveform-based playback for podcasts, music, voice recordings, or any audio-heavy content.

What You Get

• A navigable waveform display integrated into the Video.js control bar
• Click-to-seek and scrubbing across the rendered waveform
• Real-time waveform visualization of live microphone input
• Fullscreen support and standard Video.js event integration
• Configurable wavesurfer.js options passed through the plugin

Common Use Cases

• Podcast and audiobook players that benefit from a visual waveform
• Music and sample players where scrubbing by waveform is more intuitive
• Voice-recording interfaces showing live microphone waveforms
• Video players for audio-focused content needing richer seek visualization

Under The Hood

Architecture - The plugin lives under src/js and registers itself as a Video.js plugin/component, replacing the default seek UI with a wavesurfer.js-driven waveform. It instantiates a wavesurfer instance bound to the player’s media element, forwards Video.js play/pause/seek interactions into wavesurfer, and relays wavesurfer events (ready, seek, finish) back to the player. Styling ships separately under src/css, and a microphone plugin path enables live-input visualization.

Tech Stack - Written in JavaScript and distributed as a UMD bundle (dist/videojs.wavesurfer.js). It declares runtime peer libraries video.js (>=7.0.5) and wavesurfer.js (>=6.3.0 <7.0.0), and uses a Karma-based test harness (karma.conf.js), ESLint flat config, and a build-config directory for its bundling pipeline.

Code Quality - The repository includes a test/ suite run under Karma with Coveralls coverage reporting and GitHub Actions CI, a CHANGES.md changelog, and multiple runnable examples/. Development activity has slowed, but the project is mature and well documented on its dedicated docs site.

API Design - Integration follows Video.js conventions: instantiate a player, enable the wavesurfer plugin, and pass a nested options object mirroring wavesurfer.js configuration. Developers already familiar with Video.js plugins will find the surface predictable, and the docs provide copy-paste examples for common setups including the microphone mode.