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.