Options
Props
List of available props
| Prop | Required | Type | Description | Default |
|---|---|---|---|---|
| options | TOptions | WaveForm Options | { waveColor: '#e7e7e7' progressColor: '#ffb86a' barWidth: 3 barRadius: 2 barGap: 3 barHeight: 0.8 height: 50 dragToSeek: { debounceTime: 1000 } } | |
| grid | string | Grid Class uses Tailwind CSS v4 | [grid-template-areas:'image_metadata_metadata_metadata'_'currentDuration_waveform_waveform_endDuration'_'controls_controls_volume_actions'] grid-cols-[auto_minmax(0,1fr)_auto_auto] phone:[grid-template-areas:'image_metadata_controls_volume_actions'_'currentDuration_waveform_waveform_waveform_endDuration'] phone:grid-cols-[auto_minmax(0,1fr)_auto_auto_auto] tablet:[grid-template-areas:'image_metadata_controls_currentDuration_waveform_endDuration_volume_actions'] tablet:grid-cols-[auto_auto_auto_auto_minmax(0,1fr)_auto_auto_auto_auto] | |
| hidePlaylistPopup | boolean | Hides playlist popup | false |
Slots
List of available component slots
| Slot name | Available data | Description |
|---|---|---|
| image | #image={ track } | Lets you customize image (artwork) |
| metadata | #metadata={ track } | Lets you customize title and artist name |
| controls | #controls={ togglePlayback, isPlaying, onPlayPreviousTrack, onPlayNextTrack, onToggleRepeat, playlist, playlistOptions } | Lets you customize player controls |
| currentDuration | #currentDuration={ currentDuration } | Lets you customize track current duration |
| waveform | #waveform={ initializing } | Lets you customize waveform slot |
| endDuration | #endDuration={ endDuration } | Lets you customize track total duration |
| volume | - | Lets you customize volume slot |
| actions | #actions={ track } | Ability to add custom actions to player such as "Add to favorite" |
| close | #close={ onClosePlayer } | Lets you customize close button |