@object-required/cassette-player

CassettePlayer

Audio player component for VueJS applications.

Usage

Install the package:

npm install --save @object-required/cassette-player
yarn add @object-required/cassette-player

Register the component:

import { createApp } from 'vue'
import App from './App.vue'
import CassettePlayer from '@object-required/cassette-player'    // Import

const app = createApp(App)
app.use(CassettePlayer)                                          // Register
app.mount('#app')

Embed the component:

<!-- src is the only required attribute -->
<CassettePlayer
  :src="audioFileUrl"
  :download-label="Download"
  :play-label="Play"
  :pause-label="Pause"
/>

Customization

The component uses BEM notation for CSS class names and exposes several attributes on the root node for styling purposes.

<article
    class="cassette-player"
    data-is-loading="false"
    data-is-playing="false"
    data-can-play="true"
    data-can-seek="true">
  <audio src="http://example.com/audio.wav">
    <a
        href="http://example.com/audio.wav"
        download>
      <!-- Extracted from src component property -->
      Download audio.wav
    </a>
  </audio>
  <div class="cassette-player__ui">
    <div class="cassette-player__title">
      audio.wav
    </div>
    <input
        class="cassette-player__playback-control"
        type="button"
        value="Play">
      <input
          type="range"
          class="cassette-player__rewind-control"
          name="seek"
          step="any"
          min="0"
          max="10.8">
    <div class="cassette-player__progress">
      <!-- Elapsed / Total -->
      HH:MM:SS / HH:MM:SS
    </div>
    <a
        class="cassette-player__download-link"
        href="http://example.com/audio.wav"
        download>
      <button>
        Download
      </button>
    </a>
  </div>
</article>