@internetarchive/waveform-progress

<waveform-progress>

A customizable scrubber bar useful for scrubbing through media.

Zones of Silence

Customizable Colors

Installation

yarn add @internetarchive/waveform-progress

Usage

// waveform-progress.js
import WaveformProgress from '@internetarchive/waveform-progress';
export default WaveformProgress;

<!-- index.html -->
<script type="module">
  import './waveform-progress.js';
</script>

<style>
  waveform-progress {
    height: 5rem;
    width: 100%;
    --fillColor: #3272b6;
    --zoneOfSilenceColor: orange;
  }
</style>

<waveform-progress
  id="waveform"
  waveformUrl='./waveform.png'
  interactive=true
></waveform-progress>

<script>
  const waveformProgress = document.getElementById('waveform');

  // set a value
  waveformProgress.percentComplete = 23;

  // add zones of silence if needed
  waveformProgress.zonesOfSilence = [
    { startPercent: 20, endPercent: 23 },
    { startPercent: 52, endPercent: 57 },
    { startPercent: 73, endPercent: 76 }
  ];

  // listen for value changes
  waveformProgress.addEventListener('valuechange', e => {
    console.log('Value has changed, new value:', e.detail.value);
  });
</script>

Development

Prerequisite

yarn install

Start Development Server

yarn start  // start development server and typescript compiler

Testing

yarn test

Testing via browserstack

yarn test:bs

Demoing using storybook

yarn storybook

Linting

yarn lint