'Cannot read property 'canvas' of undefined' when using wavesurfer.js with Ember.js

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/http://ift.tt/2mWKkh0');

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. In my terminal window, ember-cli is saying components/feed-track.js: line 5, col 26, 'WaveSurfer' is not defined. This doesn't make sense as I imported it and it's at least showing the scrollbar, right?

Anyways 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.