NgWaveform
Library to visualize audio waveform. Built as pure Angular library that doesn't wrap any of JS library. With NgWaveform you can create interactive customisable waveform of any audio file in your Angular application.
Quick start
npm install --save ng-waveform
;
; waveform: NgWaveformComponent; onPlayButtonClick onPauseButtonClick
API Reference
NgWaveformComponent
Methods
-
play(start: number = 0): void
Play audio, start - starting position -
pause(): void
Stops audio
Events
trackLoaded
- emits when data fetched from Url, returns time in ms spent for fetching.rendered
- emits when waveform is rendered, returns time in ms spent for rendering.durationChange
- emits when duration of audio is changed, returns duration value in seconds.timeUpdate
- emits when current time of audio changes, returns object that implements interfaceITimeUpdateEvent
.paused
- emits when audio paused. Useful for switch Play/Pause buttons in external control.regionChange
- emits when region start or/and end positions change, returns object that implements interfaceIRegionPositions
.
Properties
Name | Description |
---|---|
src: string |
Url of src mp3 file |
height = 100 |
Height of component |
waveColor = '#d3d3d3' |
Color of wave |
backgroundColor = 'transparent' |
Background color of component |
overlayBackgroundColor = 'rgba(0, 0, 0, 0.5)' |
Background color of overlay filling component while playing |
useRegion: boolean |
Turn region on |
withRegionLabels: boolean |
Turn region labels on |
regionBackgroundColor = 'transparent' |
Background color of region |
regionStartStickColor = 'red' |
Color of region left border stick |
regionEndStickColor = 'red' |
Color of region right border stick |
regionTextColor = '#000' |
Color of region labels text |
autoplay |
Turn autoplay on load on |
Intrfaces
Credits
Thank you very much for great inspiration wavesurfer.js team.
Conclusion
Feedback, issues and stars will be very appreciated.