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

Question

我正在使用 Video.js在我的 Ionic 3 视频和音频应用程序中，一切正常。但是现在，我想使用 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

有点像