Внедрение wavesurfer-js в машинописный текст

Я реализую 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" неопределенного"


typescript angular wavesurfer.js
person Raza Ellahi    schedule 06.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно создать объект WaveSurfer следующим образом:

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

this.waveSurfer.waveSurfer.play();
person moritz.vieli    schedule 24.04.2019