如何在我的 Angular 4 项目中导入 wavesurfer.js？

Question

我在我的 Ionic 3 应用程序中使用 Video.js 来播放视频和音频，一切正常。但是现在，我想将 Video.js Wavesufer plugin 用于音频。

我通过 npm 安装了插件：

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

并将它们导入我的 component.ts:

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

然后我调用了videojs函数来初始化播放器：

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
              }
            }
          }, () => { }
        );
      }
  }

但是控制台打印出以下错误：

Error: plugin "wavesurfer" does not exist.

因此，我将对象更改为：

fluid: true,
plugins: { VideojsWavesurfer }

显然识别了插件，但现在我得到了这个错误（我说它显然识别了插件，因为这个错误来自 videojs.wavesurfer.min.js）：

Uncaught Error: Cannot find module "WaveSurfer"

我已经尝试将 WaveSurfer 添加到 app.components.ts 上的导入，但没有任何变化。那么，我该如何解决呢？

Answer 1

我在 Github here

上找到了解决方案

这有点像

如何在我的 Angular 4 项目中导入 wavesurfer.js？

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

video.js

typescript

wavesurfer.js

ionic3

angular