2

I'm trying to use wavesurfer.js in my vue front-end app. After I get the link to the audio file from the backend I get this error:

wavesurfer.js?8896:5179 Uncaught (in promise) TypeError: Cannot read property 'isPaused' of null
    at WaveSurfer.empty (wavesurfer.js?8896:5179)
    at WaveSurfer.load (wavesurfer.js?8896:4852)
    at _callee$ (GameScreen.vue?dcce:42)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
    at _next (asyncToGenerator.js?1da1:25)
    at eval (asyncToGenerator.js?1da1:32)
    at new Promise (<anonymous>)

This is the code I'm using in my vue component

<script>
import axios from 'axios';
import wavesurfer from 'wavesurfer.js';

export default {
  name: 'GameScreen',
  data(){
    return {
      isLoading: true,
    }
  },
  mounted(){
    this.initAudio();
  },
  methods: {
    initAudio(){
      axios.get('http://localhost:6060/track').then( async (response) => {
        console.log(response.data);
        
        const waveform = new wavesurfer({
          container: this.$refs.wave,
          color: 'violet',
          backend: 'MediaElement'
        });
        
        await waveform.load(response.data);

        await waveform.on('ready', () => {
          this.isLoading = false;
          //waveform.play();
        });

        console.log(waveform);
      });
    }
  }
}
</script>

Is there any error in the code or something I can do to fix this?

UPDATE

The question is closed, I wanted to post the solution but not possible. Anyway the problem was with a typo I've made when the library is instantiated. I forget to call the create method. to instantiate correctly WaveSurfer the syntax is new WaveSurfer.create({...}) and not only new WaveSurfer({})

Thank you all for the help.

newbiedev
  • 2,607
  • 3
  • 17
  • 65
  • 1
    There is no piece of code that is trying to access `isPaused`. Don't try to throw in `await` keywords at random places (almost certain both code lines you placed it in have no use for it), instead read up on `async` / `await`. – connexo Apr 22 '21 at 16:42
  • 1
    Well the `isPaused` is just caused by the call to `waveform.load()` so I would assume `container` is the problem. Hard to say without seeing your template. Run a `console.log(this.$refs.wave)` to make sure it is a valid ref – Matt Apr 22 '21 at 16:47
  • 1
    According to the docs, it's not `new WaveSurfer.create({...})` but `WaveSurfer.create({...})`. Also the docs give you `import WaveSurfer from 'wavesurfer.js';` - don't confuse your instance with the default export. – connexo Apr 22 '21 at 17:18

0 Answers0