2

我正在尝试为我的应用程序中的音频和视频内容生成波形，目前使用 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 未定义”。谁能告诉我如何使用打字稿使用这些插件。一个例子会很棒。

4

1 回答 1

4

我通过在 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。我删除了 wavesurfer，这可能有帮助吗？

于 2019-06-12T11:20:17.360 回答