Реализация wavesurfer-js в машинописи - PullRequest
Новая
       8

Реализация wavesurfer-js в машинописи

0 голосов
/ 06 февраля 2019

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

Index.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 »из неопределенного»

1 Ответ

0 голосов
/ 24 апреля 2019

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

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

this.waveSurfer.waveSurfer.play();
...