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?
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
@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?
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?
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?
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.
