wangfei660/vue-waveform

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

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)
    }
  }