A lightweight and customizable TypeScript library for rendering audio waveforms on HTML canvas. Create beautiful, interactive audio visualizations with ease.
Waveform Renderer is a lightweight and customizable TypeScript library for rendering audio waveforms on HTML canvas. Its primary function is to create visual representations of audio files.
Features:
Highly customizable appearance.
Performant canvas-based rendering. This indicates that the library uses the HTML canvas element for efficient drawing of the waveforms.
Responsive and touch-friendly, making it suitable for various devices.
Real-time progress updates, allowing users to see the current playback position.
Interactive seeking, enabling users to navigate through the audio by interacting with the waveform.
Written in TypeScript with full type support, which enhances code maintainability and provides better developer experience.
Resolution independent with HiDPI/Retina support, ensuring crisp visuals on high-resolution screens.
It offers various configuration options to control the waveform's appearance, such as color, background color, bar width, gap, and progress line styling.
It provides support for events such as renderStart
, renderComplete
, seek
, error
, destroy
, ready
, resize
, and progressChange
, allowing developers to respond to different states and interactions.
The library exports a main WaveformRenderer
component and a utility function getPeaksFromAudioBuffer
for calculating waveform data from raw audio.
It includes methods to setOptions
, setPeaks
, setProgress
, and destroy
the waveform instance.
Waveform Renderer is designed to be a focused alternative to larger audio libraries like wavesurfer.js, concentrating solely on waveform visualization and thus having a smaller bundle size and optimized performance for waveform rendering. It does not include features like playback, regions, or spectrograms.
It supports modern browsers that support Canvas and ES6.