如何在Angular 4项目中导入waveurfer.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
              }
            }
          }, () => { }
        );
      }
  }

但是控制台会显示以下错误：

  

错误：插件“ wavesurfer”不存在。

因此，我将对象更改为：

fluid: true,
plugins: { VideojsWavesurfer }

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

  

未捕获的错误：找不到模块“ WaveSurfer”

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

Answer 1

我在Github here上找到了解决方案

类似