Examples Docs GitHub
Wavesurfer.js is an open-source audio visualization library for creating interactive, customizable waveforms.
Gold sponsor 💖 Closed Caption Creator

✨ Features

  • HTML5 Audio and Web Audio support
  • Responsive and customizable waveforms
  • Highly extensible with plugins
  • TypeScript API – see the documentation

See more examples

🧑‍💻 Quick start


<div id="waveform">
  <!-- the waveform will be rendered here -->
</div>

<script type="module">
import WaveSurfer from 'https://cdn.jsdelivr.net/npm/wavesurfer.js@7/dist/wavesurfer.esm.js'

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: '/audio.mp3',
})

wavesurfer.on('interaction', () => {
  wavesurfer.play()
})
</script>

🧩 Plugins

  • Regions
    Creates clickable overlays to mark regions of audio.
  • Hover
    Shows the time position on hover.
  • Envelope
    A graphical interface to add fade-in and -out effects and control volume.
  • Record
    Records audio from the microphone and renders a waveform.
  • Minimap
    A small waveform that serves as a scrollbar for the main waveform.
  • Timeline
    Displays notches and time labels below the waveform.
  • Spectrogram
    A visual representation of the spectrum of frequencies in audio using FFT. Created by @akreal.

💾 Examples

Volume:

📖 API Documentation

Discover how to use wavesurfer.js with our comprehensive TypeScript API documentation.

Explore the API Docs

🙏 Contributors

We'd like to thank all our contributors for their hard work and dedication to making wavesurfer.js the best audio visualization library out there.

View Contributors on GitHub