katspaugh/wavesurfer.js

Wavesurfer.js is a JavaScript and TypeScript library that draws audio waveforms on a web page and lets visitors play back audio files. You drop it into a website, point it at an audio file, and it renders a scrollable, clickable waveform in the browser. Clicking anywhere on the waveform seeks to that point in the audio. The library handles all the decoding and rendering internally using the browser's built-in Web Audio capabilities, so there is no server processing involved. The library ships with an official plugin system that covers common needs without extra dependencies. The Regions plugin lets you mark off sections of an audio clip with colored overlays. The Timeline plugin adds time labels below the waveform. The Minimap plugin shows a small overview waveform that acts as a scrollbar when the main waveform is zoomed in. There are also plugins for recording audio from a microphone, showing a frequency spectrogram, and drawing fade-in and fade-out volume curves directly on the waveform. Styling is handled through standard CSS. The waveform renders inside a Shadow DOM tree, which keeps its styles from clashing with the rest of your page. You can still reach individual parts of the waveform, such as the cursor or region markers, using a CSS feature called the part selector. A few practical limits are worth knowing. The library decodes audio entirely in the browser, so very large audio files can run into memory problems. For long files, the README recommends supplying pre-computed waveform data rather than asking the browser to decode the full file. Streaming audio is also only supported when you supply that pre-computed data and the total duration upfront. Audio files hosted on a different domain require that domain to allow cross-origin requests, there is no workaround from the JavaScript side. Installation is via npm or a script tag. TypeScript type definitions are bundled with the package, so no separate type install is needed.