Svelte Audio Waveform

The fastest way to add stunning audio visualizations to your Svelte apps. Create beautiful, responsive waveform visualizations from audio files with progress indication and customizable styling. Perfect when you need professional-looking audio visualization without the complexity of heavyweight solutions like Wavesurfer.

$3

- 🎵 Music players
- 🎙️ Podcast interfaces
- 📞 Voice message previews
- ✂️ Audio editing tools
- 🌟 Any project where audio visualization matters

---

Installation

Install the package using npm:

``bash
npm install svelte-audio-waveform
`

---

Features

- 🎨 Customizable colors and styling
- 🌈 Gradients support
- 📊 Bar and wave display modes
- 🎯 Progress indication
- 📱 Responsive design
- 🔍 High-resolution support (600/1200 peaks)

!Svelte Audio Waveform Demo

---

Basic Usage

`svelte


peaks={peaks}
position={position}
/>
`

---

Examples

$3

A basic waveform with default settings.

`svelte
peaks={peaks}
position={0.5}
/>
`

---

$3

Display the waveform as bars instead of a continuous wave.

`svelte
peaks={peaks}
position={0.5}
barWidth={2}
/>
`

---

$3

Customize the waveform and progress colors.

`svelte
peaks={peaks}
position={0.5}
color="#444444"
progressColor="#ff0000"
/>
`

---

$3

Apply beautiful gradients to your waveform.

`svelte
peaks={peaks}
position={0.5}
gradientColors={["red", "blue", "green"]}
progressGradientColors={["yellow", "orange", "purple"]}
/>
`

---

$3

This example shows how to load an audio file, generate peaks, calculate playback progress, and display a waveform with playback controls.

`svelte



`

---

API Reference

$3

| Prop | Type | Default | Description |
|-----------------------|---------------------|-------------------|-----------------------------------------------------|
| peaks | number[] | required | Array of audio peak values |
| position | number | required | Current playback position as a percentage (0 to 1) |
| color | string | 'grey' | Waveform base color |
| progressColor | string | 'purple' | Progress color |
| gradientColors | string[] | undefined | Colors for gradient styling |
| progressGradientColors | string[] | undefined | Gradient colors for the progress bar |
| height | number | required | Height of the waveform |
| width | number | required | Width of the waveform |
| barWidth | number | undefined | Width of bars (if using bar mode) |

---

Utilities (Optional)

This package does not include utility functions like getPeaks, createAudioBuffer, or formatTime`. However, you can copy these utilities from the source repository if needed.

---

Acknowledgments

- Inspired by Wavesurfer.js and https://github.com/SoundstripeEngineering/react-audio-waveform
- Built with Svelte and TypeScript
- Sponsored by: Generative Ambient Music DAW for Content Creators - Atmoscapia