Complete reference for all available props and configuration options for theWaveSurferPlayer component.
This component is built on top of WaveSurfer.js. For detailed configuration options, advanced features, and complete API documentation, visit the official WaveSurfer.js documentation.
WaveSurfer.js DocumentationoptionspluginseventsheightHeight of the waveform in pixels
Default: 128waveColorColor of the waveform bars
Default: '#999'progressColorColor of the progress overlay
Default: '#555'barWidthWidth of each waveform bar
Default: 1barGapGap between waveform bars
Default: 0barRadiusBorder radius of bars
Default: 0const options = {
// Visual Configuration
height: 48,
waveColor: '#4F4A85',
progressColor: '#383351',
barWidth: 3,
barGap: 2,
barRadius: 4,
// Audio Configuration
url: 'https://example.com/audio.mp3',
autoplay: false,
loop: false,
volume: 0.8,
// Interaction Configuration
cursorColor: '#333',
cursorWidth: 2,
interact: true,
responsive: true,
fillParent: true,
// Advanced Configuration
pixelRatio: 1,
backend: 'WebAudio',
normalize: true,
minPxPerSec: 50
}
<WaveSurferPlayer :options="options" />@ready@play@pause@finish@timeupdate@click@dblclick@scroll@zoom@waveSurfer