WaveSurfer Select Plugin

A WaveSurfer.js plugin that enables shift+drag selection on the waveform timeline. Create selections to measure time intervals with optional looping playback.

Features

• Shift+Drag Selection - Hold Shift and drag on the waveform to create a selection
• Time Display - Shows start, end, and duration in HH:MM:SS,MS format
• Loop Playback - Optional checkbox to loop playback within the selection
• Ableton-Style Loop Brace - Visual indicator when looping is enabled
• Draggable & Resizable - Move the selection or resize by dragging the edges
• Zoom Compatible - Selection updates correctly when zooming
• Customizable Styling - Configure colors, borders, and overlay position

Installation

npm install wavesurfer-select-plugin

Usage

Basic Usage

import WaveSurfer from 'wavesurfer.js'
import { SelectPlugin } from 'wavesurfer-select-plugin'

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  url: 'audio.mp3'
})

const selectPlugin = SelectPlugin.create()
wavesurfer.registerPlugin(selectPlugin)

// Listen to selection events
selectPlugin.on('select', (start, end, duration) => {
  console.log(`Selected: ${start}s to ${end}s (${duration}s)`)
})

Configuration Options

interface SelectPluginOptions {
  regionColor?: string              // Selection region background. Default: 'rgba(255, 255, 255, 0.2)'
  borderColor?: string              // Selection border color. Default: 'rgba(255, 255, 255, 0.6)'
  borderWidth?: number              // Border width in pixels. Default: 1
  selectOverlayBackground?: string  // Overlay bar background. Default: 'rgba(0, 0, 0, 0.8)'
  selectOverlayTextColor?: string   // Overlay bar text color. Default: '#fff'
  selectOverlayPosition?: 'top' | 'bottom'  // Overlay bar position. Default: 'bottom'
  showLoopControl?: boolean         // Show loop checkbox. Default: true
  loopByDefault?: boolean           // Start with loop enabled. Default: false
}

Example with Options

const selectPlugin = SelectPlugin.create({
  regionColor: 'rgba(100, 149, 237, 0.3)',
  borderColor: 'rgba(100, 149, 237, 0.8)',
  borderWidth: 2,
  selectOverlayPosition: 'top',
  showLoopControl: true,
  loopByDefault: false
})

wavesurfer.registerPlugin(selectPlugin)

Events

| Event | Parameters | Description | |-------|------------|-------------| | ready | - | Plugin initialized | | destroy | - | Plugin destroyed | | select | startTime, endTime, duration | Selection values updated | | selectEnd | - | Selection cleared |

Methods

| Method | Description | |--------|-------------| | clearSelection() | Clear the current selection |

Interaction

• Shift+Drag - Create a new selection
• Click - Clear the selection (when not holding Shift)
• Drag Selection - Move the entire selection
• Drag Edges - Resize the selection by dragging left or right edge

Development

npm install
npm run dev

License

MIT