vue-waveform
Usage
install
-
npm -i vue-waveform
-
import {waveform} from 'vue-waveform'
-
Vue.use(waveform)
Instructions
scene
websocket arraybuffer file mp3 aac blob arraybuffer
Components
vue-waveform
<vue-waveform ref="mycom" :range="0.6" :WIDTH="800" :HEIGHT="100" websocketURL="ws://192.168.6.48:8082/ws/websocket/socketServer.do" :id="selectid" :arraybuffer="arraybuffer"></vue-waveform>
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()
Components audioPlayer
audioUI:
timelineUI:
USAGE
import {waveform} from 'vue-waveform'
import 'vue-waveform/dist/static/css/app.css'
<vue-waveplayer @ready=ready :range="0.3" ref="mycom" :WIDTH="800" :HEIGHT="100" bgColor="#fff" :URL="URL"></vue-waveplayer>
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)
}
}
Dependencies
Dependencies
babel-core: ^6.22.1babel-eslint: ^7.1.1babel-loader: ^6.2.10babel-plugin-transform-runtime: ^6.22.0babel-polyfill: ^6.2.0babel-preset-env: ^1.3.2babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0chalk: ^1.1.3connect-history-api-fallback: ^1.3.0copy-webpack-plugin: ^4.0.1css-loader: ^0.28.0eslint: ^3.19.0eslint-config-standard: ^6.2.1eslint-friendly-formatter: ^2.0.7eslint-loader: ^1.7.1eslint-plugin-html: ^2.0.0eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^2.0.1eventsource-polyfill: ^0.9.6express: ^4.14.1extract-text-webpack-plugin: ^2.0.0file-loader: ^0.11.1friendly-errors-webpack-plugin: ^1.1.3html-webpack-plugin: ^2.28.0http-proxy-middleware: ^0.17.3opn: ^4.0.2optimize-css-assets-webpack-plugin: ^1.3.0ora: ^1.2.0rimraf: ^2.6.0semver: ^5.3.0shelljs: ^0.7.6stylus: ^0.54.5stylus-loader: ^2.1.1url-loader: ^0.5.8vconsole: ^2.5.2vue: ^2.3.3vue-loader: ^11.3.4vue-style-loader: ^2.0.5vue-template-compiler: ^2.3.3webpack: ^2.3.3webpack-bundle-analyzer: ^2.2.1webpack-dev-middleware: ^1.10.0webpack-hot-middleware: ^2.18.0webpack-merge: ^4.1.0