How can I import the wavesurfer.js in my Angular 4 project?

Question

I'm using Video.js in my Ionic 3 app for videos and audios, and all works fine. But now, I want to use the Video.js Wavesufer plugin for audios.

I installed the plugin via npm:

npm install videojs-wavesurfer --save (plugin)
npm install wavesurfer.js --save (dependency)

And imported them in my component.ts:

import WaveSurfer from 'wavesurfer.js';
import VideojsWavesurfer from 'videojs-wavesurfer';

And I called videojs function to init the player:

ngAfterViewInit() {
    if (this.audio) {
        this.audio = this.audio.nativeElement;

        let audioJS = videojs(this.audio,
          {
            fluid: true,
            plugins: {
              wavesurfer: {
                src: this.audioSource,
                msDisplayMax: 10,
                debug: true,
                waveColor: 'grey',
                progressColor: 'black',
                cursorColor: 'black',
                hideScrollbar: true
              }
            }
          }, () => { }
        );
      }
  }

But console prints the following error:

Error: plugin "wavesurfer" does not exist.

So, I changed the object to:

fluid: true,
plugins: { VideojsWavesurfer }

And apparently recognized the plugin, but now I get this error (I said that apparently it recognized the plugin because this error came from videojs.wavesurfer.min.js):

Uncaught Error: Cannot find module "WaveSurfer"

I've already tried to add WaveSurfer to imports on app.components.ts but nothing changes. So, how can I fix it?

Retiform

Answer 1

I found the solution on Github here

Which is something like

Emilie

It working! I chose to use WaveSurfer directly without using Video.js for audios, and this solution helped me a lot! Thank you so much! (I need to wait more 5 hours to give you the bounty) – Retiform

It's okay brother more important things is to solve your problem – Emilie