Я пытаюсь сгенерировать форму волны для аудио- и видеоконтента в своем приложении, в настоящее время использую 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 is undefined». Может ли кто-нибудь сказать мне, как использовать эти плагины с помощью машинописного текста. Пример был бы отличным.
Я получил эту работу (после некоторых проб и ошибок), явно добавив путь к плагину, который мне нужен, в массивы 'скриптов' (архитектор и тест) в 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 и вейсерфер. Я удалил вейсерфер, что могло помочь?