Usage

$3

* npm -i vue-waveform


* import {waveform} from 'vue-waveform'
* Vue.use(waveform)

$3

#### scene
websocket arraybuffer file mp3 aac blob arraybuffer

#### Components

##### vue-waveform
``

`

!效果

!效果2

##### props
| attr | type | default | description |
| ---- | ---- | ---- | ---- |
| WIDTH | Number | 500 | The canvas WIDTH |
| HEIGHT | Number | 300 | The canvas HEIGHT |
| openAudioContext | boolean | true | use audiocontext player flase: use audio player |
| websocketURL | String | '' | websocket url example 'ws://192.168.1.1:8082' |
| id | String | '' | device id |
| type | String | 'bar' | 'bar' : bar graph , 'line' : line graph |
| range | Number | 1 | axisY Ratio of Canvas height |
| arraybuffer | ArrayBuffer | null | websocket Receive Byte array |
| bgColor | string | 'rgb(0, 0, 0)' | canvas background color , rgb or Hex color code |

##### method：
| name | return type | parameter | description |
| ---- | ---- | ---- | ---- |
| openWS | void | | open websocket |
| play | void | | play audio |
| pause | void | | pause audio |
| stop | void | | close websocket and pause audio |

example：
`
this.$refs.mycom.openWS()
`

$3

##### audioUI：
!效果3
##### timelineUI:
!效果3

USAGE

`
import {waveform} from 'vue-waveform'
import 'vue-waveform/dist/static/css/app.css'



`
##### props
| attr | type | default | description |
| ---- | ---- | ---- | ---- |
| WIDTH | Number | 500 | The canvas WIDTH |
| HEIGHT | Number | 300 | The canvas HEIGHT |
| playType | Number | 2 | 1: audio html , 2 : timeline |
| type | String | 'line2' | only choose line2 |
| range | Number | 1 | axisY Ratio of Canvas height |
| bgColor | string | 'rgb(0, 0, 0)' | canvas background color , rgb or Hex color code |
| URL | string | '' | file audio URL |
##### Methods:
| name | return type | parameter | description |
| ---- | ---- | ---- | ---- |
| stop | void | none | destroy |
| pause | void | none | pause |
##### Events:
| name | return type | parameter | description |
| ---- | ---- | ---- | ---- |
| updateTimeEnded | void | currenttime | time change dispatch currenttime |
Example
`
mounted() {
this.URL = './static/3.aac'
},
methods: {
click() {
this.$refs.mycom.seekTo(this.timeline)
},
ready() {
this.$refs.mycom.seekTo(this.timeline)
}
}

``