1.0.0 • Published 4 years ago
vue-waveform-player-test v1.0.0
vue-waveform-player
一个音乐波形播放器组件
A music player with waveform component for vue.js project.
Usage
npm -i vue-waveform-player-testimport {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. |
1.0.0
4 years ago