Question

我想用Waveurfer.js在Vue中显示一个wav文件，我的代码是：

     var wavesurfer = WaveSurfer.create({
          container: '#waveform',
          waveColor: 'red',
          progressColor: 'purple'
        });

     wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

     new Vue({
          el: '#app',
          data: {
            message: 'data1'
          },
        })

但我收到错误：

Unknown custom element: <wave> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Answer 1

我找到了解决方案！

https://forum.vuejs.org/t/how-to-use-wavesurfer-with-vuejs-solved/14924

就这样写：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  mounted () {
    this.$nextTick(() => {
      this.wavesurfer = WaveSurfer.create({
          container: '#waveform',
          waveColor: 'blue',
          progressColor: 'purple'
      })
      this.wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3')
    })
  },
  methods: {
    play () {
        this.wavesurfer.playPause()
    }
  }
})

我应该在VUE中创建waveurfer实例？

1 个答案: