Question

我正在使用waveurfer-js angular 6应用程序，播放器打开时没有任何控件，并且还显示错误消息：

未捕获的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 步 在 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'
});

如何在TypeScript中实现Wavesurfer-js

1 个答案: