Problem Using Javascript Library in Ember

Learning Team
1

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.

2

Someone just suggested rolling back to 1.8.2 based on this discussion on their GitHub repo and it seems to be working now. I am still unsure why the latest version is not working.

3

Why are you using didRender instead of didInsertElement? Looking at this: The Component Lifecycle - Components - Ember Guides didRender is also called whenever the component is updated. Maybe this leads to the problem. I’m guessing that you probably only want to call this code once when the component is setup?