Socket
Book a DemoInstallSign in
Socket

svelte-audio-waveform

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-audio-waveform

Generate stunning audio waveforms Svelte and Canvas. Transform an array of peak data into beautifully rendered, customizable waveforms for music players, podcasts, audio editing tools, and more.

0.0.5
latest
Source
npmnpm
Version published
Weekly downloads
9
-82%
Maintainers
1
Weekly downloads
Β 
Created
Source

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.

Perfect for:

  • 🎡 Music players
  • πŸŽ™οΈ Podcast interfaces
  • πŸ“ž Voice message previews
  • βœ‚οΈ Audio editing tools
  • 🌟 Any project where audio visualization matters

Installation

Install the package using npm:

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

<script>
  import AudioWaveform from 'svelte-audio-waveform';

  let peaks = []; // Array of peak data
  let position = 0.5; // Current playback position as a percentage (0 to 1)
</script>

<AudioWaveform 
  peaks={peaks} 
  position={position}
/>

Examples

1. Standard Waveform

A basic waveform with default settings.

<AudioWaveform 
  peaks={peaks} 
  position={0.5} 
/>

2. Bar Mode

Display the waveform as bars instead of a continuous wave.

<AudioWaveform 
  peaks={peaks} 
  position={0.5}
  barWidth={2}
/>

3. Custom Colors

Customize the waveform and progress colors.

<AudioWaveform 
  peaks={peaks} 
  position={0.5}
  color="#444444"
  progressColor="#ff0000"
/>

4. Gradient Colors

Apply beautiful gradients to your waveform.

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

5. Full Example with Audio File Upload

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

<script lang="ts">
  import AudioWaveform from 'svelte-audio-waveform';

  let peaks = [];
  let progress = 0; // Current playback progress as a percentage (0 to 1)
  let audio: HTMLAudioElement;
  let isPlaying = false;

  async function handleAudioFile(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (!file) return;

    // Generate peaks (use your own utility or copy from repo)
    const buffer = await createAudioBuffer(file);
    peaks = getPeaks(buffer, { numberOfBuckets: 1200 });

    // Create audio element for playback
    const url = URL.createObjectURL(file);
    audio = new Audio(url);

    // Set up audio events to calculate progress
    audio.addEventListener('timeupdate', () => {
      progress = audio.currentTime / audio.duration; // Calculate progress as a percentage (0 to 1)
    });

    audio.addEventListener('play', () => {
      isPlaying = true;
    });

    audio.addEventListener('pause', () => {
      isPlaying = false;
    });

    audio.addEventListener('ended', () => {
      isPlaying = false;
      progress = 0;
    });
  }

  function handleSeek(event: CustomEvent<number>) {
    if (!audio) return;
    const newTime = event.detail * audio.duration; // Convert percentage to time in seconds
    audio.currentTime = newTime;
    progress = event.detail; // Update progress directly as a percentage (0 to 1)
  }

  function togglePlayPause() {
    if (!audio) return;
    if (isPlaying) {
      audio.pause();
    } else {
      audio.play();
    }
  }
</script>

<div class="audio-player">
<input type="file" accept="audio/*" on:change={handleAudioFile} />

{#if peaks.length > 0}
<div class="waveform-container">
  
<AudioWaveform 
    peaks={peaks} 
    position={progress}
    color="#444444"
    progressColor="#ff0000"
    onSeek={handleSeek}
/>

<div class="controls">
<button on:click={togglePlayPause}>
{isPlaying ? '⏸️ Pause' : '▢️ Play'}
</button>

<div class="time-display">
{formatTime(progress * audio.duration)} / {formatTime(audio.duration)}
</div>
</div>
</div>
{/if}
</div>

API Reference

AudioWaveform Props

PropTypeDefaultDescription
peaksnumber[]requiredArray of audio peak values
positionnumberrequiredCurrent playback position as a percentage (0 to 1)
colorstring'grey'Waveform base color
progressColorstring'purple'Progress color
gradientColorsstring[]undefinedColors for gradient styling
progressGradientColorsstring[]undefinedGradient colors for the progress bar
heightnumberrequiredHeight of the waveform
widthnumberrequiredWidth of the waveform
barWidthnumberundefinedWidth 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

FAQs

Package last updated on 27 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚑️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.