Problem Using Javascript Library in Ember

@skuzzie wrote:

I am currently trying to implement wavesurfer.js into an Ember.js component. So far I've imported it into my ember-cli-build.js file like so:

app.import('bower_components/wavesurfer.js/dist/wavesurfer.min.js');

And then inside the component's js file I am trying to do a simple test of it by calling it on a div that is included in the helper's template.

import Ember from 'ember';

export default Ember.Component.extend({
    didRender() {
        var wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: 'violet',
            progressColor: 'purple',
            barWidth: 3,
            cursorWidth: 3,
            normalize: true
        });
        wavesurfer.load('assets/sound4.mp3');
    }
});

Now when the page loads it shows the wavesurfer.js scrollbar but nothing else. In the console it reads Cannot read property 'canvas' of undefined.

It seems to be erroring at line 2048 of wavesurfer.js with the following errors:

entry.start = (entry.waveCtx.canvas.offsetLeft / totalWidth) || 0;


Uncaught TypeError: Cannot read property 'canvas' of undefined

Any help would be greatly appreciated as I am completely stuck as to what I should do.

Posts: 2

Participants: 1

Read full topic