1

我在 typescript 项目中实现 wavesurfer-js，播放器打开但我找不到任何控件来播放暂停或静音事件，

索引.HTML

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

CSS

   <div id="waveform"></div>

TS

    import WaveSurfer from 'wavesurfer.js';
    var wavesurfer = Object.create(WaveSurfer);

@Component({
  selector: 'app-audio-page',
  templateUrl: './audio-page.component.html',
  styleUrls: ['./audio-page.component.scss'],
})

    export class AudioPageComponent implements OnInit {

  constructor(private bottomSheetRef: 
MatBottomSheetRef<AudioPageComponent>) { }

  audiofile = 
 "http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/
song_cjrg_teasdale_64kb.mp3";

  ngOnInit() {

  wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#a8d4e4',
  progressColor: '#1a99be',
  backend: 'MediaElement',
});

  wavesurfer.load(this.audiofile);

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

  });


}


  openLink(event: MouseEvent): void {
    this.bottomSheetRef.dismiss();
    event.preventDefault();
  }

}

当我尝试绑定一个事件时

(click)="wavesurfer.playPause()"

它给出了一个错误“无法读取未定义的属性'playPause'”

4

1 回答 1

0

您需要像这样创建 WaveSurfer 对象：

this.waveSurfer = WaveSurfer.create({
  container: '#waveform',
  ..
});

this.waveSurfer.waveSurfer.play();
于 2019-04-24T05:59:29.467 回答