Не удалось заставить плагины работать с wavesurfer.js с использованием машинописи - PullRequest
Новая
       10

Не удалось заставить плагины работать с wavesurfer.js с использованием машинописи

0 голосов
/ 01 сентября 2018

Я пытаюсь сгенерировать волновую форму для аудио и видео контента в моем приложении, в настоящее время использую Angular 6 и TypeScript. Я мог создать волновую форму с помощью wavesurfer.js, но я не смог заставить работать временную пробку. В моем angular.json у меня есть такие сценарии 

"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" 
        ]

и в моем файле component.ts у меня есть код вроде 

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 ...
     })
   ]
 });

}

без плагина, я мог бы получить форму волны, но если я пытаюсь добавить плагины, я получаю ошибку «TimelinePlugin не определен». Может ли кто-нибудь сказать мне, как использовать эти плагины с помощью машинописи. Пример был бы великолепен.

1 Ответ

0 голосов
/ 12 июня 2019

Я получил эту работу (после некоторых проб и ошибок), явно добавив путь к нужному мне плагину к массивам 'scripts' (architect и test) в angular.json: 

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

Затем я импортировал плагин в компонент с помощью аудиоплеера: 

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

И инициализировал плеер: 

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, но сложно сказать, работает ли это как-то. У меня были установлены более новые wavesurfer.js и wavesurfer . Я удалил волнсерфер, который мог бы помочь?

...