vue-waveform/src/plugin/websocket.js

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

import bus from './event'

export default class WsPlayer {
  constructor(options) {
    if (typeof options.Mse !== 'object') {
      console.log('MSE is not a object')
    }
    if (typeof options.Drawer !== 'object') {
      console.log('drawer is not a object')
    }
    this.opts = Object.assign({}, options)
    this.mse = options.Mse
    this.drawer = options.Drawer
    this.frames = 0
    this.buffer = []
    this.drawCanvas()
  }
  drawCanvas() {
    if (!this.opts.canvasCtxL && !this.opts.canvasCtxR) return
    this.opts.canvasCtxL.fillStyle = this.opts.bgColor
    this.opts.canvasCtxL.fillRect(0, 0, this.opts.WIDTH, this.opts.HEIGHT)
    this.opts.canvasCtxR.fillStyle = this.opts.bgColor
    this.opts.canvasCtxR.fillRect(0, 0, this.opts.WIDTH, this.opts.HEIGHT)
  }

  openWs(url, id, name, socketUrl = '/ws/websocket/socketServer.do') {
    let _this = this
    return new Promise((resolve, reject) => {
      if (!url.startsWith('ws://')) {
        url = 'ws://' + url + socketUrl
      }
      let self = this
      let ws = new WebSocket(url)
      self.ws = ws
      self.id = id
      ws.binaryType = 'arraybuffer'
      ws.onopen = function() {
        console.log('-- WebSocket is opened! --')
        console.log(`-- LISTEN id : ${id}`)
        resolve()
      }
      ws.onerror = function (err) {
        reject(err)
      }
      ws.onmessage = function (event) {
        if (Object.prototype.toString.call(event.data) === '[object ArrayBuffer]') {
          self.mse.appendBuffer(event.data)
        
            self.drawer.receive(event.data)
          
          //self.drawer.addData(event.data)
          /* let array = Array.prototype.slice.call(new Uint8Array(event.data))
          self.buffer.push.apply(self.buffer, array)
          self.frames ++
          if (self.frames > 3) {
            var file = new Uint8Array(self.buffer).buffer
            self.drawer.receive(file)
            self.frames = 0
            self.buffer.length = 0
          } */
        } else if (Object.prototype.toString.call(event.data) === '[object String]') {
          if (event.data.indexOf(',') > -1) {
            let arr = event.data.split(',')
            let t = 0
            arr.map(item => {
              if (item.indexOf(':') > -1) {
                let vol = item.split(':')
                if (vol[0] === 't') {
                  t = vol[1] / 100
                }
                if (vol[0] === 'l' && _this.opts.canvasCtxL) {
                  _this.opts.canvasCtxL.fillStyle = _this.opts.bgColor
                  _this.opts.canvasCtxL.fillRect(0, 0, _this.opts.WIDTH, _this.opts.HEIGHT)
                  let grd = _this.opts.canvasCtxL.createLinearGradient(0, 0, 0, _this.opts.HEIGHT)
                  grd.addColorStop(0, '#ed1919')
                  grd.addColorStop(t, '#ed1919')
                  grd.addColorStop(1, '#43e94b')
                  _this.opts.canvasCtxL.fillStyle = grd
                  _this.opts.canvasCtxL.fillRect(0, _this.opts.HEIGHT - _this.opts.HEIGHT * parseInt(vol[1]) / 100, _this.opts.WIDTH, _this.opts.HEIGHT)
                }
                if (vol[0] === 'r' && _this.opts.canvasCtxR) {
                  _this.opts.canvasCtxR.fillStyle = _this.opts.bgColor
                  _this.opts.canvasCtxR.fillRect(0, 0, _this.opts.WIDTH, _this.opts.HEIGHT)
                  let grd = _this.opts.canvasCtxR.createLinearGradient(0, 0, 0, _this.opts.HEIGHT)
                  grd.addColorStop(0, '#ed1919')
                  grd.addColorStop(t, '#ed1919')
                  grd.addColorStop(1, '#43e94b')
                  _this.opts.canvasCtxR.fillStyle = grd
                  _this.opts.canvasCtxR.fillRect(0, _this.opts.HEIGHT - _this.opts.HEIGHT * parseInt(vol[1]) / 100, _this.opts.WIDTH, _this.opts.HEIGHT)
                }
              }
            })
          } else if (event.data.indexOf('time') > -1) {
            let arr = event.data.split(':')
            bus.$emit('durationed', arr[1])
          }
        }
      }
    })
  }
  play() {
    this.ws && this.ws.send('STOP_LISTEN')
    this.ws && this.ws.send('LISTEN:' + this.id)
    this.drawer.startAnimation()
    this.mse.play()
  }
  seek(timeStamp) {
    this.mse.dom.currentTime = timeStamp
    this.ws && this.ws.send('SEEK:' + timeStamp)
  }
  pause() {
    this.mse.pause()
    this.drawer.stopAnimation()
    this.ws && this.ws.send('STOP_LISTEN')
    this.drawCanvas()
  }
  stop() {
    // stop animation
    this.drawer.stopAnimation()
    this.drawCanvas()
    return new Promise((resolve, reject) => {
      if (Object.prototype.toString.call(this.ws) === '[object WebSocket]') {
        this.ws.send('STOP_LISTEN')
        this.ws.onclose = function () {
          resolve(1)
        }
        this.mse && this.mse.stop()
        this.ws.close()
        this.ws = null
      } else {
        resolve(0)
      }
    })
  }
}