mediaquad-sound-component/README.md

This component is built on the [wavesurfer](https://wavesurfer.xyz) library.

# Sound Component with Customized UI for Vue

This component is built on the [wavesurfer](https://wavesurfer.xyz) 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

```sh
npm i mediaquad-sound-component
```

### Usage


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

Usage component
```vue
<Player :playlist="playlist" :buttons="buttons" :colors="colors" :options="options" />
```

### Props Reference
```ts
// 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
}
```