Waveform Renderer
Waveform Renderer Waveform Renderer

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.