mediaquad-sound-component v0.0.3

Sound Component with Customized UI for Vue

This component is built on the wavesurfer library.

Features

• Support for m4a, mp3, mp4, wav, aac, wma, flac, opus, ogg
• Custom cover image
• Display title and subtitle
• Playlists
• Color customization
• Button customization

Installation

npm i mediaquad-sound-component

Usage

Import component

import { Player } from  'mediaquad-sound-component'
import  'mediaquad-sound-component/dist/mediaquad-video-component.css'

Usage component

<Player :playlist="playlist" :buttons="buttons" :colors="colors" :options="options" />

Props Reference

// Playlist item
class playlistItem {
    url: string = ''
    cover: string = ''
    title: string = ''
    description: string = ''
    artist: string = ''
}

// Player colors
interface  colors {
    buttonColor: string = "#ffffff"
    buttonHoverColor: string = "#ff00ff"
    waveColor: string = "#ff4e00"
    progressColor: string = "#dd5e98"
    cursorColor: string = "#ddd5e9"
    backgroundColor: string = "#ffffff"
    textColor: string = "lightgrey"
}

// Visible buttons
class  playerButtons {
    playBtn: boolean = true
    nextChapterBtn: boolean = true
    prevChapterBtn: boolean = true
    timer: boolean = true    
}

// Other options
class  options {
    showCover: boolean = true
    showTitle: boolean = true
    showDescription: boolean = true
    defaultVolume: number = 1.0
    autoPlaylist: boolean = false
    dragToSeek: boolean = true
    sampleRate: number = 8000
    height: number = 20
    cursorWidth: number = 2
    barWidth: number = 2
    barGap: number = 2
    barRadius: number = 2
}