Vue instance not working

[rowild]

I try to implement Peaks with Vue, but iwthout success so far. The goal would be to have a basic example for Peaks with Vue to be posted here.

This is what I have so far:

<script>
// React example:
// @src https://github.com/chrisn/peaksjs-react-example/blob/master/src/WaveformView.jsx
import Peaks from 'peaks.js'

const AudioContext = window.AudioContext || window.webkitAudioContext
const audioContext = new AudioContext()

export default {
  name: 'Home',
  data () {
    return {
      peaks: null
    }
  },
  methods: {
    initPeaks () {
      console.log('initPeaks invoked')
      /**
       * You may only pass one source to render waveform data.
       *  webAudio
       *  dataUri
       *  waveformData
       *
       * The first 3 are required, the others are optional
       */
      var options = {
        mediaElement: document.getElementById('audio'),
        containers: {
          zoomview: document.getElementById('zoomview-container'),
          overview: document.getElementById('overview-container')
        },
        webAudio: {
          audioContext: audioContext,
          scale: 128,
          multiChannel: true
        }
        // zoomview: {
        //   container: document.getElementById('zoomview-container'),
        //   waveformColor: '#00e180',
        //   playedWaveformColor: '#bc6dfd',
        //   showPlayheadTime: true
        // },
        // zoomLevels: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096],
        // keyboard: true,
        // logger: console.error.bind(console),
        // pointMarkerColor: '#006eb0',
        // showPlayheadTime: true,
        // emitCueEvents: true
      }

      console.log('options =', options)

      Peaks.init(options, function (err, peaks) {
        console.log('Peaks init invoked')

        if (err) {
          console.log(err.message)
          return
        }

        this.peaks = peaks
        this.onPeaksReady()
      })()
    },
    onPeaksReady: () => {
      console.log('peaks ready')
    }
  },
  mounted () {
    this.initPeaks()
  }
}
</script>

initPeaks is called without any errors, but it seems, Peaks.init does not ever reach the first console statement. Which is weird, because if there is something wrongly defined in the options variable, then it errors out to the console...

What am I doing wrong?

[chrisn]

I don't know anything about Vue, but if you can post a complete example somewhere I'll take a look.

[chrisn]

The only thing I can see from your code is the way you're calling Peaks.init() - you have extra () and if you intend this to refer to your Vue component you need an arrow function:

Peaks.init(options, (err, peaks) => {
  console.log('Peaks init invoked')

  if (err) {
    console.log(err.message)
    return
  }

  this.peaks = peaks
  this.onPeaksReady()
});

[rowild]

@chrisn Thank you very much ffor your feedback!

I tried both, the "function" way and the "fat arrow" way, and the extra "()" slipped in, but I actually don't use them. Anyway, "this.peaks" never is assigned any value, and "onPeaksReady" is never invoked...

However, it seems there is already a Vue-Peaks package: https://github.com/oncletom/vue-waveform-template/

I will try to find my way around that one. Maybe you'd like to put the react and this Vue version in the readme of your npm package? :-)

Thanks again! Till next time with another question...

[chrisn]

You're welcome! I agree that having more examples would really help, so will look into that.