<audio-element>

A LitElement wrapper for the HTML <audio> element.

Installation

yarn add @internetarchive/audio-element

Usage

// audio-element.js
import AudioELement from '@internetarchive/audio-element';
export default AudioElement;

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

<audio-element></audio-element>

<script>
  const audioElement = document.querySelector('audio-element');

  // set volume
  audioElement.volume = 0.75;

  // set playback rate
  audioElement.playbackRate = 0.75;

  // set audio sources
  audioElement.sources = [
    {url: "./spring.ogg", mimetype: "audio/ogg"}
    {url: "./spring.mp3", mimetype: "audio/mpeg"}
  ]

  // listen for time changes; this updates many times per second as your media plays back
  audioElement.addEventListener('timeupdate', e => {
    console.log('Current time has changed, new value:', e.detail.currentTime);
  });

  // listen for track duration changes like on load
  audioElement.addEventListener('durationchange', e => {
    console.log('Track duration has changed, new value:', e.detail.duration);
  });

  // start playing
  audioElement.play();

  // pause playing
  audioElement.pause();

  // seek to 10s
  audioElement.seekTo(10);

  // seek by 10s
  audioElement.seekBy(10);
</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