使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';

在github上關注此問題為例