Simple audio player webcomponent customizable with waveform. Created with waveform-path.
npm i wave-audio-path-playerimport 'wave-audio-path-player'<script type="module" src="YOUR_PATH/wave-audio-path-player.umd.js"></script><!-- Basic -->
<wave-audio-path-player src="hello_world.ogg" wave-width="200" wave-height="40"></wave-audio-path-player>
<!-- Complete -->
<wave-audio-path-player src='hello_world.ogg' wave-width="200" wave-height="40" color="#55007f" wave-color="#55007f" wave-progress-color="#ff00ff" wave-slider="#ffaaff" wave-options='{"samples":40,"type":"steps","width":192,"height":40}'></wave-audio-path-player>wave-audio-path-player {
margin-top: 10px;
margin-bottom: 10px;
}
#demo1::part(player) {
background:rgb(0, 0, 0);
padding: 15px 0px;
border-radius: 20px;
border:1px solid black;
}
#demo1::part(button) {
stroke: white;
fill:white;
}
#demo1::part(currenttime), #demo1::part(duration) {
color:white;
font-weight: bold;
}
#demo1::part(path1) {
stroke: white;
}
#demo1::part(path2) {
stroke:fuchsia;
}| Name | Required | Type | Description |
|---|---|---|---|
| src | True | audio file | Source path to audio file |
| wave-width | True | px | Number of pixels |
| wave-height | True | px | Number of pixels |
| color | False | color | Color of elements |
| wave-color | False | color | Color of wave incomplete (Only for wave-option "animation":false) |
| wave-progess-color | False | color | Color of wave complete or animation |
| wave-slider | False | color | Color of slider thumb |
| wave-options | False | object | Object of waveform-path (width and height is replaced for wave-width and wave-height) |