Как я могу импортировать wavesurfer.js в моем проекте Angular 4?

Я использую Video.js в своем приложении Ionic 3 для видео и аудио, и все работает отлично. Но теперь я хочу использовать плагин Video.js Wavesufer для аудио.

Я установил плагин через 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):

Uncaught Error: не удается найти модуль "WaveSurfer"

Я уже пытался добавить WaveSurfer на импорт на app.components.ts но ничего не меняется. Итак, как я могу это исправить?

1 ответ

Решение

Я нашел решение на Github здесь

Что-то вроде

Другие вопросы по тегам