vue-waveform-player

一个音乐波形播放器组件

A music player with waveform component for vue.js project.

Usage

npm -i vue-waveform-player-test

import {vue-waveform-player} from "vue-waveform-player-test"

<vue-audio-wave-test :audioSrc="audioSrc" :canvasWidth="600" :canvasHeight="100" ref="audiowave"></vue-audio-wave-test>

Props

| attr | type | default | description | | --- | --- | ---| --- | | canvasWidth | Number | 800 | The Width of Waveform Canvas | | canvasHeight| Number | 100 | The Height of Waveform Canvas | | canvasStyle | String | null | The Style of Canvas.Use like inline style.| | audioSrc | String | null | Audio Url | | playedLineColor | String | #ff0900 | The Color of Played Part Wave | | unplayLineColor | String | #c2c2c2 | The Color of Unplayed Part Wave | | sliderLineColor | String | #dedede | The Color of Slider | |sliderLineWidth | Number | 1 | The Line Width of Slider | |waveLineWidth | Number | 1 | The Line Width of Waveform`s Lines |

Methods

| name | return type | parameter | description| | --- | --- | ---| ---| | play | void | | Play The Audio | | pause | void | | Pause The Audio |

Events

| name | return type | Example | description| | --- | --- | ---| ---| | onready | Object | {duration:30} | When Audio And Waveform Ready.Return The Duration of The Audio File | | onended | Object | {} | When The Audio is Over.Return Empty Object | | time-update | Object | {raw:61.1,format:"01:01"} | When Updatetime Event of audio Element is triggered.Return audio Element's currentTime And a Formated String. |