Getting WaveSurfer.js to work in Ionic 3

Question

I am trying to embed WaveSurfer.js in an Ionic 3 app.

I tried including the CDN script into the index file and accessing the WaveSurfer variable in the root page constructor.

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'
        });
    }
}

I also tried access this variable through the global window variable (I know this is horrible practice, but I am just building a proof of concept for now)

let wavesurfer = window['WaveSurfer'];

The WaveSurfer plugin recently started supporting ES6 and think this is a cleaner integration but since I am new to Ionic/Angular I am having problems getting this to work as well.

Answer 1

Yeah, use ES6

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

then, in your component

import WaveSurfer from 'wavesurfer.js';

follow this issue on github for an example