Как реализовать wavesurfer-js в машинописи

Question

Я использую приложение wavesurfer-js angular 6, плеер открывается без элементов управления, а также с ошибкой говорит:

Uncaught TypeError: Невозможно прочитать свойство 'wavesurfer' из неопределенного

Вот мой код TS:

import { Component, AfterViewInit, OnInit } from '@angular/core';
import { MatBottomSheetRef } from '@angular/material';
import WaveSurfer from 'wavesurfer.js';
import VideojsWavesurfer from 'videojs-wavesurfer';
import SpectrogramPlugin from 
'wavesurfer.js/dist/plugin/wavesurfer.spectrogram.min.js';
@Component({
  selector: 'app-audio-page',
  templateUrl: './audio-page.component.html',
  styleUrls: ['./audio-page.component.scss'],
})
export class AudioPageComponent implements OnInit {
  public wavesurfer: WaveSurfer;
  constructor(private bottomSheetRef: 
MatBottomSheetRef<AudioPageComponent>){ }

  ngOnInit() {
    let audiofile = 
 "https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox
/song_cjrg_teasdale_64kb.mp3"
    this.wavesurfer = WaveSurfer.create({
  container: '#waveform',
  height:100,
  waveColor : 'red',
  scrollParent: true,
  progressColor: 'purple',
  plugins: [
      SpectrogramPlugin.create({
          container: "#wave-spectrogram"
      })
  ]
});

this.wavesurfer.load(audiofile);        

  this.wavesurfer.on('ready', function () {
      this.wavesurfer.play();
  });

 }

} 

и мой HTML:

  <div id="waveform"></div>
  <div id="wave-spectrogram"></div>

Answer 1

Шаг 1. Включите wavesurfer.js в index.html вашего проекта Angular.

      <script src="https://unpkg.com/wavesurfer.js"></script>

Шаг 2 В компоненте, который вы хотите использовать WaveSufer, сразу после импорта добавьте:

      declare var WaveSurfer;

Шаг 3 Объявите переменную в своем классе

      protected waveSurfer = null;

Шаг 4 Создайте экземпляр:

      this.waveSurfer = WaveSurfer.create({
   container:'#my-wave-div'
});