wave-audio-player v1.1.0

HTML5 wave-audio-player

NPM install :

npm i wave-audio-player

Import ans use:

<wave-audio-player
    class="first"
    src="/samples/file.mp3" 
    wave-width="200"
    wave-height="40"
    onEnded="eventFired"
    onError="eventFired"
    onLoadedmetadata="eventFired"
    onCanplay="eventFired"
    onCanplaythrough="eventFired"
    onDurationchange="eventFired"
    onEmptied="eventFired"
    onLoadeddata="eventFired"
    onPause="eventFired"
    onPlay="eventFired"
    onPlaying="eventFired"
    onRatechange="eventFired"
    onSeeked="eventFired"
    onSeeking="eventFired"
    onStalled="eventFired"
    onSuspend="eventFired"
    onTimeupdate="eventFired"
    onVolumechange="eventFired"
    onWaiting="eventFired"
></wave-audio-player>

<h3>Animation</h3>
<wave-audio-player src="hello_world.ogg" wave-width="200" wave-height="40" wave-options='{"animation":true,"samples":50}'></wave-audio-player>

<h3>Customized Attributes</h3>
<wave-audio-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-player>

<wave-audio-player
    src="hello_world.ogg"
    wave-width="200"
    wave-height="80"
    color="#00aa7f"
    wave-color="#00aa7f"
    wave-progress-color="#aaff00"
    wave-slider="#00aa00"
    wave-options='{"samples":50,"type":"steps","paths":[{"d":"V","sy":0,"x":0,"ey":100},{"d":"A","sx":0,"sy":100,"ex":100,"ey":100,"rx":10,"ry":10,"angle":180,"arc":1,"sweep":1},{"d":"V","sy":0,"x":100,"ey":100}]}'
></wave-audio-player>

Attributes

Check MDN Doc for all the events.

Main project:

Customized and Advanced version of wave-path-audio-player