Not a Propaganda Machine

    vue-waveform

    3.2.14 • Public • Published

    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
    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:

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

    Install

    npm i vue-waveform

    DownloadsWeekly Downloads

    28

    Version

    3.2.14

    License

    none

    Unpacked Size

    14.5 MB

    Total Files

    65

    Last publish

    Collaborators

    • chenqiaoen521