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.

serversideup/amplitudejs

4,313View on GitHub

AmplitudeJS is a JavaScript library and framework for building custom HTML5 audio players. It serves as a client-side playlist manager and media controller that bridges the gap between HTML elements and the Web Audio API, allowing developers to create branded media interfaces without relying on default browser styles. The project is distinguished by its use of CSS-class-based DOM binding and data-attribute state mapping, which links HTML elements directly to playback controls and track metadata. It includes a dedicated visualization system that uses the Web Audio API to render real-time SVG w

syedhali/EZAudio

4,991View on GitHub

EZAudio is an audio library for Apple platforms that provides standardized interfaces for microphone capture, file playback, and hardware output. It functions as a low-latency audio processor and visualization framework designed to manipulate audio buffers and route signals with minimal delay. The project features a hardware-accelerated waveform renderer for drawing real-time audio amplitudes and rolling plots. It also includes a Fast Fourier Transform analyzer that converts time-domain audio samples into frequency-domain data for spectral analysis. The library covers a broad range of capabi

scottschiller/SoundManager2

5,073View on GitHub

SoundManager2 is a JavaScript audio API and cross-browser audio engine designed to provide consistent playback across different web browsers and devices. It functions as an HTML5 audio wrapper and playback manager that abstracts native APIs into a unified interface, ensuring compatibility through an automatic switching mechanism between available audio backends and codecs. The library distinguishes itself with an RTMP audio streamer for network communication with media servers and a built-in ID3 metadata parser for extracting track titles, artist information, and genre tags from audio files.

xiangyuecn/Recorder

5,615View on GitHub

Recorder is a JavaScript library for capturing audio from microphones and encoding the resulting data into multiple formats, including MP3, WAV, and WebM. It provides a unified interface for cross-platform audio recording across web browsers and mobile applications. The library functions as an audio signal processing tool and waveform visualizer, offering real-time visual feedback through frequency histograms and waveforms. It includes specialized capabilities for encoding and decoding dual-tone multi-frequency telephone keypad tones. The project covers a broad range of audio manipulation ca

katspaughwavesurfer.js

Features