Angular 无法使用typescript使插件与wavesurfer.js一起工作
我正在尝试为我的应用程序中的音频和视频内容生成波形,目前使用angular 6和TypeScript。我可以使用wavesurfer.js制作波形,但我无法让时间线插件工作。在我的angular.json中,我有这样的脚本Angular 无法使用typescript使插件与wavesurfer.js一起工作,angular,typescript,wavesurfer.js,Angular,Typescript,Wavesurfer.js,我正在尝试为我的应用程序中的音频和视频内容生成波形,目前使用angular 6和TypeScript。我可以使用wavesurfer.js制作波形,但我无法让时间线插件工作。在我的angular.json中,我有这样的脚本 "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js",
"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未定义”
有谁能告诉我如何使用typescript使用这些插件吗。举个例子就好了 我通过在angular.json中显式地将我需要的插件路径添加到“scripts”数组(architect和test),实现了这一点(经过一些尝试和错误):
"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,这可能会有所帮助