angular - typescript kullanarak wavesurfer.js ile eklentileri çalıştıramadım

Uygulamamdaki ses ve video içeriği için bir dalga formu oluşturmaya çalışıyorum, şu anda Angular 6 ve TypeScript kullanıyorum. Dalga formunu wavesurfer.js ile oluşturabiliyorum ama zaman çizelgesi eklentisini çalıştıramadım. Angular.json dosyamda scriptler şu şekilde

"scripts": [
          "node_modules/jquery/dist/jquery.min.js",  
          "node_modules/popper.js/dist/umd/popper.min.js",  
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/moment/min/moment.min.js",
          "node_modules/wavesurfer.js/dist/wavesurfer.js",
          "node_modules/wavesurfer.js/dist/plugin/wavesurfer.timeline.js" 
        ]

ve component.ts dosyamda şöyle bir kod var

declare var WaveSurfer;
declare var TimelinePlugin;

export class TranscriptComponent implements OnInit {

 ngAfterViewInit() {
  this.wavesurfer = WaveSurfer.create({
   container: '#waveform',
   waveColor: 'violet',
   progressColor: 'purple',
   cursorColor: '#d9fb36',
   normalize: true,
   skipLength: 15,
   hideScrollbar: true,
   backend: 'MediaElement',
   plugins: [
     TimelinePlugin.create({
       // plugin options ...
     })
   ]
 });

}

Eklenti olmadan dalga biçimini alabiliyorum, ama eklentileri eklemeye çalışırsam, "TimelinePlugin tanımsız" hatası alıyorum. Bu eklentileri TypeScript kullanarak nasıl kullanacağımı birisi söyleyebilir mi? Bir örnek harika olurdu.

Cevap #1

Bunu (biraz deneme-yanılma sonrasında) angular.json'daki 'scripts' dizilerine (architect ve test) ihtiyacım olan eklentinin yolunu açıkça ekleyerek çalıştırmayı başardım:

"scripts": [
    "./node_modules/wavesurfer.js/dist/wavesurfer.js",
    "./node_modules/wavesurfer.js/dist/plugin/wavesurfer.regions.js"
],

Daha sonra eklentiyi ses çalarla birlikte bileşene aktardım:

import * as WaveSurfer from 'wavesurfer.js';
import * as WaveSurferRegions from 'wavesurfer.js/dist/plugin/wavesurfer.regions.js';

Ve oyuncuyu başlattı:

ws: any;

ngOnInit() {
    this.ws = WaveSurfer.create({
        container: document.querySelector('#player_waveform'),
        backend: 'MediaElement',
        plugins: [
            WaveSurferRegions.create({
                regions: [
                    {
                        start: 1,
                        end: 3,
                        color: 'hsla(400, 100%, 30%, 0.5)'
                    }, {
                        start: 5,
                        end: 7,
                        color: 'hsla(200, 50%, 70%, 0.4)'
                    }
                ]
            })
        ]
    });
}

npm üzerinde de bazı değişiklikler yaptım ama bunun işlerin yoluna girmesini sağlayan şey olup olmadığını söylemek zor. Hem daha yeni wavesurfer.js hem de wavesurfer yüklüydü. wavesurfer'ı kaldırdım, bu yardımcı olmuş olabilir mi?

İlgili makaleler