angular - 如何在 typescript 中实现 wavesurfer-js

Question

我正在使用 wavesurfer-js angular 6 应用程序，播放器在没有控件的情况下打开，并且出现错误说：

未捕获的类型错误：无法读取未定义的属性“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 步 在 Angular 项目的 index.html 中包含 wavesurfer.js

<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'
});