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>