BETA

vue-waveform

waveform wavesurfer -waveform js html 音频audio波形图


34
about 2 years ago
21
2.0.1
GitHubNPM

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> 

效果

效果2

props
attrtypedefaultdescription
WIDTHNumber500The canvas WIDTH
HEIGHTNumber300The canvas HEIGHT
openAudioContextbooleantrueuse audiocontext player flase: use audio player
websocketURLString''websocket url example 'ws://192.168.1.1:8082'
idString''device id
typeString'bar''bar' : bar graph , 'line' : line graph
rangeNumber1axisY Ratio of Canvas height
arraybufferArrayBuffernullwebsocket Receive Byte array
bgColorstring'rgb(0, 0, 0)'canvas background color , rgb or Hex color code
method:
namereturn typeparameterdescription
openWSvoidopen websocket
playvoidplay audio
pausevoidpause audio
stopvoidclose websocket and pause audio

example:

this.$refs.mycom.openWS()

Components audioPlayer

audioUI:

效果3

timelineUI:

效果3

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
attrtypedefaultdescription
WIDTHNumber500The canvas WIDTH
HEIGHTNumber300The canvas HEIGHT
playTypeNumber21: audio html , 2 : timeline
typeString'line2'only choose line2
rangeNumber1axisY Ratio of Canvas height
bgColorstring'rgb(0, 0, 0)'canvas background color , rgb or Hex color code
URLstring''file audio URL
##### Methods:
namereturn typeparameterdescription
----------------
stopvoidnonedestroy
pausevoidnonepause
##### Events:
namereturn typeparameterdescription
----------------
updateTimeEndedvoidcurrenttimetime 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)
}

}