vue-waveform/src/plugin/mse.js

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

import bus from './event'

export default class Mse {

  constructor(volume) {
    this.volume = volume
    this.initMediaSource()
  }

  initMediaSource() {
    let dom = new Audio()
    dom.currentTime = 0
    dom.addEventListener('error', function (e) {
      console.log(e)
    })
    dom.addEventListener('timeupdate', function(e) {
      bus.$emit('domtimeupdate', dom.currentTime * 1000)
    })
    window.dom = dom
    /*bus.$on('seekTimed', function(e) {
      dom.currentTime = e
    })*/
    this.dom = dom
    this.dom.volume = this.volume || 0
    this.mediaSource = new MediaSource()
    console.log(`this.dom = ${this.dom.volume}`)
    /*this.dom.addEventListener('timeupdate', (e) => {
      console.log(`timeupdate = ${this.dom.currentTime}`)
    })*/
    this.dom.addEventListener('play', (e) => {
      bus.$emit('play')
    })
    dom.src = window.URL.createObjectURL(this.mediaSource)
    this.mediaSource.addEventListener('sourceopen', this.onSourceOpen.bind(this))
  }

  onSourceOpen() {
    this.sourceBuffer = this.mediaSource.addSourceBuffer('audio/aac')
    this.sourceBuffer.addEventListener('updateend', () => {
      if (this.dom.paused) {
        this.dom.play()
      }
    })
    /*this.sourceBuffer.onupdate = function (e) {
      console.log(e.timeStamp)
    }
    this.sourceBuffer.onabort = function (e) {
      console.log(e.timeStamp)
    }*/
  }
  play() {
    this.dom && (this.dom.play())
  }

  pause() {
    this.dom && (this.dom.pause())
  }

  appendBuffer (buffer) {
    try {
      this.sourceBuffer.appendBuffer(buffer)
    }catch (error){

    }
  }
  stop() {
    this.dom && this.dom.pause()
    this.dom = null
    this.mediaSource = null
    this.initMediaSource()
  }
  restartDom() {
    //this.dom = new Audio()
  }
}