Another one Uncaught Reference: wavesurfer is not defined

[mpapado3]

Hey, I would like to add wavesurfer on a laravel / vuejs project that I make, but after adding the unpkg script and create the wavesurfer instance I get Uncaught Reference, that wavesurfer is not defined.

I use

let waveScript = document.createElement('script');
waveScript.setAttribute('src', 'https://unpkg.com/wavesurfer.js');
document.head.appendChild(waveScript);

to add the script to the head and then once the vue is loaded (either on setup() or mounted()) I call:

const wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple',
    scrollParent: true
 });

wavesurfer.load('../storage/preprocessed-audio/innews1.wav');

But when I put also the wavesurfer instance to the script (with innerHTML) the error is gone, but there is no waveform on the page.

on the body there is

How I could overcome this issue?

[mpapado3]

I have used

npm install wavesurfer.js and then add below on vuejs.

import * as WaveSurfer from 'wavesurfer.js';

and it works.

[sundayz]

Remember to also put the package version number in your unpkg url, that way your code won't break if there is an update, for example: https://unpkg.com/wavesurfer.js@5.1.0/dist/wavesurfer.js