Location of code


#1

Hey guys,

I’ve ported a website over to Meteor so that we can expand into a Saas in the future. In the webpage, I was able to use wavesurfer.js just fine. Content was loaded and the music played perfectly. Wavesurfer is used to create a playable audio waveform. Now that I’m porting over code into Meteor, I can’t seem to make the waveform loader work. I always get a little confused on where to put the initialization code. I generally put init code I usually put under Template.foo.rendered = function(){ //code ): but for some reason the waveform doesn’t load.

Is that the correct location to put such code? I know the wavesurfer.js source code is being loaded into the app, and Meteor doesn’t complain about calling wavesurfer methods which also shows me that the code is being loaded. However, when checking for external assets, all of my images are loaded but my .mp3 file is not.

This is the code that I needs in order to initialize an instance of the waveform


// Init & load audio file
document.addEventListener('DOMContentLoaded', function() {
    var options = {
        container: document.querySelector('#waveform'),
        waveColor: '#bfbfbf',
        progressColor: '#f9f9f9',
        height: 80,
        normalize: true,
        hideScrollbar: true,
        cursorColor: 'transparent'
    };

    // Init
    wavesurfer.init(options);

    // Load audio from URL
    wavesurfer.load('media/tshirt.mp3');
});

// Play at once when ready

wavesurfer.on('ready', function() {
    wavesurfer.play();
});


My tshirt.mp3 file is under public/media/tshirt.mp3 which is the correct location for the public loading of external media assets.

I’ve tried a bunch of things so I would really appreciate any help. Could it be that my location path for the media file is incorrect?

Cheers everyone!


#2

it’s a race condition, Meteor 1.2 should offer better solution for this.

Right now my way to solve this is to provide a .ready() call to notify me when the library has loaded and thus run logic code.

I got the idea from @dburles . In his package he both provide a ready function for library loading compatible with iron router, and provide a way to load external libraries. https://github.com/dburles/meteor-google-maps


#3

@muaddib I gave it a look at @dburles code but I can’t seem to wrap my head around providing a .ready() call to notify when the library has loaded. Could you elaborate a little on how you’d go about doing such implementation?

Thanks my man!


#4
Template.body.onRendered(function() {
    var options = {
        container: this.find('#waveform'),
        waveColor: '#bfbfbf',
        progressColor: '#f9f9f9',
        height: 80,
        normalize: true,
        hideScrollbar: true,
        cursorColor: 'transparent'
    };
    wavesurfer.init(options);
    // do not forget about initial '/'
    wavesurfer.load('/media/tshirt.mp3');
    wavesurfer.on('ready', function() {
        wavesurfer.play();
    });
});

#5

@mrzafod this is what I have now:


Template.twoStory.rendered = function() {
    var options = {
        container: this.find('#waveform'),
        waveColor: '#bfbfbf',
        progressColor: '#f9f9f9',
        height: 80,
        normalize: true,
        hideScrollbar: true,
        cursorColor: 'transparent'
    };
    wavesurfer.init(options);
    // do not forget about initial '/'
    wavesurfer.load('/media/tshirt.mp3');
    wavesurfer.on('ready', function() {
        wavesurfer.play();
    });
}

The waveform still doesn’t load. I checked on my Chrome Dev Tools and it doesn’t even seem to be loading my .mp3 file. After about 2 seconds on the page I received NetworkError: A network error occurred error. Could that be an error on the loading of the file? Maybe it’s because I’m localhost?

Thanks again for the help!!


#6

Hmmm. Could you find the request on a Network tab? You should analyze response to find out whats really happens. localhost isnt a problem anyway. What is the size of the mp3?


#7

What is happen when you navigate from browser adress bar to localhost:3000/media/tshirt.mp3 ? Does browser download a file?


#8

Yeah this definitely loads the .mp3 file. It’s a 2.7mb file. I don’t think that should be an issue. I’m having a deeper look in the Network tab.


#9

Try this
wavesurfer.load(Meteor.absoluteUrl() + 'media/tshirt.mp3')


#10

Tried this without any luck.

 wavesurfer.load(Meteor.absoluteUrl() + ‘media/tshirt.mp3’) 

It seems that the wavesurfer.js file is being loaded after the two-story.js template file

Could that be the issue? Under the Network tab, all of the images loaded properly show up in the IMG tab, but under MEDIA, there’s nothing loaded.

Cheers!


#11

No, it is not an issue. All is ok! If so then you couldnt init a lib and get an error here:

Try filter for media and find a request for your mp3 file


#12

Yeah that’s what I figured. Tried creating a /lib folder inside the /client folder to load the wavesurfer.js file but to no avail. Under the Media tab there’s nothing being loaded.

Which makes me thing the Network Error is some sort of error happening when the app is trying to download that .mp3 file. It is certainly reachable tho.


#13

Doing some more debugging, I found this:

ReferenceError: WaveSurfer is not defined
    at null. (two-story.js?7baee961b34f02cb703df282f0e2ebb559cde662:23)

The line corresponding (23) is wavesurfer.init(options);.

The instance of the WaveSurfer class is not being created.


#14

Is it accessible from console after the page is loaded?


#15

Also tried instantiating wavesurfer like this

var wavesurfer = Object.create(WaveSurfer);

But that didn’t help either.


#16

Is the .mp3 accessible from console?


#17

Man, you should make a little repo.


#18

I will do that. Do you have some time to look it over and help me out? You da man @mrzafod


#19

I’m going to make a bare bones repo of just loading the wavesurfer. That’ll be easier to debug. Give me a few minutes.

Cheers!


#20

Just to add to the debate - have you tried putting the wavesurfer.js file into the client/compatibility folder?