wave-audio-path-player

Simple audio player webcomponent customizable with waveform. Created with waveform-path.

Live Demo

Installation

npm i wave-audio-path-player

Usage

Import

import 'wave-audio-path-player'

Hosted

<script type="module" src="YOUR_PATH/wave-audio-path-player.umd.js"></script>

Using

<!-- 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>

Custom CSS

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;
}

Attributes

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)