Load time about midi.js HOT 7 CLOSED

Nope, you've got things setup fine. You're loading a few more instruments then the demo, each soundfont package is about 1-2MB, you've got about 6mb where the demo is 2mb

You might attempt to figure out how to get the onprogress event working on your server. To do this you'll also have to enable the flag "USE_XHR" in ./js/MIDI/LoadPlugin.js -- You might run into issues calculating the percentage if your server is compressing the output automatically of JSON files. To get around this you can send "Content-Length-Raw" header with the bytesize of the uncompressed file... I know this sounds complex, and it kinda is, but that's the state of getting onprogress through XHR.

from midi.js.

I enabled USE_XHR and looked into using the loader. However, I found that there are two files in the Loader.js repo that aren't in the Window directory from having downloaded the MIDI.js package - DOMLoader.image.js and DOMLoader.link.js. Are these files needed? Did you forget to include them in MIDI.js or are they outdated? Or just not used in MIDI.js's examples?

Also, I'm not sure how to go about having the loader use the onprogress event. I see calls for MIDI.loader in LoadPlugin.js, but they're all conditionals - I don't see where loader is created. There are setup notes in loader.js, but I don't really understand them - are they saying I need to declare a var loader? If so, where?

from midi.js.

Those two files are not used in the MIDI.js demos.

Good point! To create a loader, it should work by typing in:

MIDI.loader = new widgets.Loader;

I would like to find some time to refactor the MIDI.js package, so it's a bit easier, but so it is for now!

from midi.js.

Ok, do I put that in my own code or in LoadPlugin.js? Or somewhere else? And then do I need those other two files? Or does it depend on what I'm trying to do? I just want a loader to show upon first reaching my site since it takes anywhere from around 3-10 seconds to load the page.

from midi.js.

You wont need those other two files.

You should call it right before MIDI.loadPlugin. Basic example:

window.onload = function () {
    MIDI.loader = new widgets.Loader;
    MIDI.loadPlugin({
        soundfontUrl: "./soundfont/",
        instrument: "acoustic_grand_piano",
        callback: function() {
            var delay = 0; // play one note every quarter second
            var note = 50; // the MIDI note
            var velocity = 127; // how hard the note hits
            // play the note
            MIDI.setVolume(0, 127);
            MIDI.noteOn(0, note, velocity, delay);
            MIDI.noteOff(0, note, delay + 0.75);
        }
    });
};

Hope that works for ya!

from midi.js.

Awesome, that worked! However, it's not disappearing after loading reaches 100%. I tried adding MIDI.loader.stop(), but it didn't make any difference. Is there some setting I have to change somewhere?

[update] I moved the MIDI.loader.stop() to inside the loadPlugin callback, and that worked!

Also, what's the difference between Event.add(window, "load", function()) and Window.onLoad = function()? I've always used the latter (or the Jquery equivalent). Never seen the former before. It looks like a more general event handler, but for that I've used EventTarget.addEventListener() (or again the JQuery equivalent).

from midi.js.

Event.add (which is soon to be, or already eventjs.add) is my own custom events library. It's similar to jQuery's, but handles a lot of other types of gestures. There's not any big reason for using it in MIDI.js, other than it was easy for me to add. window.onload works just as nice...

Benefits of Eventjs is touch support, and cross browser support for things like click, drag:

https://github.com/mudcube/Event.js

from midi.js.