katspaugh/wavesurfer.js
Wavesurfer.js
wavesurfer.js is a WebAudio playback library and interactive waveform visualizer that renders audio data onto an HTML5 canvas. It enables users to see and navigate sound files through a visual representation of audio peaks, allowing for direct seeking and playback control within a web browser.
The project is distinguished by its flexible rendering model, which can use precomputed peak data to display waveforms without downloading or decoding the full audio file. It utilizes a plugin-based extension model to integrate advanced tools such as spectrograms, interactive audio timelines, and real-time audio recorders for capturing microphone input.
Its broader capabilities cover audio playback management including rate adjustment and region-based looping, as well as digital signal processing via Web Audio API integration for effects and spatial panning. The library also provides tools for web-based audio editing, such as drawing volume automation curves and marking interactive audio regions.
The library supports integration with frontend frameworks to bind waveform rendering and audio controls to component lifecycles.
Features
- Audio Waveform Renderers - Implements a high-performance canvas-based renderer to visualize audio waveforms using peak data.
- Audio Visualization Tools - Renders interactive audio waveforms and spectrograms on a web canvas for audio navigation and analysis.
- Interactive Region Creation - Allows users to draw new audio segments by clicking and dragging across the waveform.
- Region Management - Adds and updates visual time-segments on a waveform and removes regions to maintain performance.
- Visual Annotations - Adds visual overlays, markers, and timeline labels to specific sections of an audio track.
- Audio Peak Precomputations - Allows waveform rendering without downloading full audio files by using precomputed arrays of maximum amplitude values.
- Waveform Region Marking - Adds colored, draggable, and resizable segments to the waveform to highlight or loop specific parts.
- Audio Engine Hybrids - Utilizes a hybrid architecture switching between HTML5 audio for streaming and Web Audio API for precise manipulation.
- Audio Playback - Manages the playback of audio files using either standard HTML5 elements or the Web Audio API.
- Playback Event Hooks - Ships a system of event hooks to trigger UI updates and custom logic during audio playback milestones.
- Playhead Seeking - The Wavesurfer project moves the playback position to a specific timestamp and retrieves the current playback time or total audio duration.
- Content Source Managers - Loads audio data from URLs, Blob objects, or File uploads to render waveforms.
- Real-time Analysis - Extracts frequency and waveform data from audio streams to create live visualizations and meters.
- Web Audio Libraries - Integrates with the Web Audio API to build custom audio graphs for effects, spatial panning, and routing.
- Interactive Waveform Visualizers - Implements an interactive canvas-based renderer that transforms audio data into navigable waveforms.
- Waveform Visualizers - Displays visual waveforms using pre-decoded peak data to allow visualization without downloading the full audio file.
- Media Element Integration - Synchronizes the waveform visualizer with existing audio or video elements to ensure playback and visualization are aligned.
- Peak Data Rendering - Displays an audio waveform using provided peak data to avoid decoding the full audio file on the client.
- Interactive Segment Marking - Creates visual overlays on a waveform to define time ranges that can be dragged, resized, and labeled.
- Temporal Region Definition - Marks specific time segments within an audio track to enable targeted interaction or metadata association.
- Peak Data Rendering - Renders waveforms immediately using precomputed peak and duration data to bypass expensive network loading and decoding.
- Scale-Based Coordinate Mappings - Provides mathematical mapping between canvas pixel coordinates and precise audio timestamps for seeking and marking.
- Playback Controllers - Provides programmatic control over audio session states including play, pause, and stop.
- Seek Bars - Allows users to seek the playhead by clicking or dragging across the visual waveform representation.
- Audio Editing - Offers a browser-based interface for marking audio regions and drawing volume automation envelopes.
- Audio Visualizers - Displays a real-time visual representation of audio input using a scrolling ticker-tape or growing waveform.
- Spectrogram Generation - Generates a color-mapped spectrogram showing how audio frequencies change over time.
- Audio Gain Visualization - Provides a graphical interface to apply fade-in and fade-out effects and adjust volume levels.
- Audio Graph Routing - Connects audio sources to processing nodes using a modular network for effects and real-time analysis.
- Audio Region Looping - Supports continuous looping of specific audio segments by triggering actions when playback exits a marked region.
- Playback Speed Controllers - Allows adjusting the playback speed of audio while optionally preserving or shifting the pitch.
- Region-Based Playback - Allows seeking playback to the start of a marked region and optionally stopping at the region's end.
- Segmented Playback - Starts audio at a specific timestamp and automatically pauses when the specified end time is reached.
- Effects Processing - Implements audio effects including equalizers, compressors, and reverb chains via an audio graph.
- Audio Recording - Captures audio input from device microphones for real-time waveform rendering.
- Signal Routing - Directs audio output to multiple destinations or sidechain processors using custom node networks.
- Real-Time Recording Visualizers - Captures microphone input and renders the audio waveform instantly for live visual feedback.
- Real-time Visualization - Captures sound from a microphone and immediately draws the resulting waveform for visual feedback.
- Chunked Audio Streaming - Implements memory-efficient playback of long audio files using a chunked streaming backend.
- Interactive Waveform Zooming - Expands or contracts the visual representation of audio via mouse wheel, touch gestures, or commands.
- Real-Time Input Visualization - Processes a real-time audio stream from a microphone to render an updating spectrogram.
- Timeline Rulers - Draws a ruler of timestamps and tick marks that synchronize with audio playback and waveform resizing.
- Waveform Zooming Controls - Adjusts the view scale of the audio visualization using a scroll wheel or pinch gesture.
- Metadata Overlays - Displays frequency spectrums, time labels, and region markers to provide technical context for audio data.
- Spectrogram Renderers - Includes a dedicated spectrogram renderer that generates frequency heat maps for audio analysis.
- Audio Frequency Heat Maps - Displays a frequency-over-time spectrogram to visualize pitch, harmonics, and noise levels.
- Volume Automation Curves - Draws a draggable volume automation curve over a waveform to interpolate gain levels during playback.
- Volume Envelope Drawing - Creates a volume-automation curve over the waveform using draggable points to control fades and levels.
- Audio Volume APIs - Implements programmatic control of audio volume levels and mute states.
- Plugin Integrations - Utilizes a plugin-based model to extend functionality with optional modules like spectrograms and timelines.
- Waveform Viewport Culling - Optimizes rendering performance by clearing and redrawing only the visible portions of the waveform during zoom or scroll.
- Plugin-Based Architectures - Employs a modular plugin architecture to integrate optional extensions like spectrograms and timelines.
- Audio Timelines - Provides an interactive audio timeline with time rulers and region markers for precise scrubbing.
- Cursor Controllers - Provides a visual tracking line and elapsed-time label that follows the mouse cursor over the waveform.
- Scrubbing Previews - Displays a vertical line and time label that follow the mouse cursor for a scrub-preview experience.
- Waveform Appearance Customizers - Provides extensive options to customize waveform colors, gradients, and layouts to match application branding.
- Minimap Navigation - Displays a small thumbnail overview of the entire audio file to facilitate quick scrolling and positioning.
- Waveform Overviews - Displays a compact, full-width version of the audio waveform to help users navigate long files.
- Audio Annotation - Library for building interactive audio annotation interfaces.
- Audio Annotation Tools - Navigable waveform visualization built on Web Audio.
- Audio Libraries - Interactive audio visualization using canvas and web audio.
- Audio And Music - Displays navigable audio waveforms.
