让 WaveSurfer.js 在 Ionic 3 中工作

Question

我正在尝试将 WaveSurfer.js 嵌入到 Ionic 3 应用程序中。

我尝试将 CDN 脚本包含到索引文件中，并在根页面构造函数中访问 WaveSurfer 变量。

index.html

<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>

home.ts

export class HomePage {
    constructor(public navCtrl: NavController) {

        var wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: 'violet',
            progressColor: 'purple'
        });
    }
}

我也尝试通过全局窗口变量访问这个变量（我知道这是一种可怕的做法，但我现在只是在构建一个概念证明）

let wavesurfer = window['WaveSurfer'];

WaveSurfer 插件最近开始支持 ES6，并认为这是一个更简洁的集成，但由于我是 Ionic/Angular 的新手，所以我在让它也能正常工作时遇到了问题。

Answer 1

是的，使用 ES6

npm install --save wavesurfer.js@2.0.0-beta01

然后，在你的组件中

import WaveSurfer from 'wavesurfer.js';

以this issue on github 为例