Loading from local file system not supported.

[acl0056]

DOMLoader does not work for local file system. In my case, I was able to do a quick fix using jQuery, which I am posting in case it might work for anyone else.

DOMLoader.sendRequest = function(conf) {
    var req = new XMLHttpRequest();
    req.open(conf.data ? "POST" : "GET", conf.url, true);
    if (req.overrideMimeType) req.overrideMimeType("text/plain; charset=x-user-defined");
    if (conf.data) req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    if (conf.responseType) req.responseType = conf.responseType;
    if (conf.onerror) req.onerror = conf.onerror;
    if (conf.onprogress) req.onprogress = conf.onprogress;
    req.onreadystatechange = function (event) {
        if (req.readyState === 4) {
            if (req.status === 0 && jQuery && conf.onload) {
                jQuery.get(conf.url, function(data, textStatus, jqXHR){
                    conf.onload(jqXHR);
                });
                return;
            }
            if (req.status !== 200 && req.status != 304) {
                if (conf.onerror) conf.onerror(event, false);
                return;
            }
            if (conf.onload) {
                conf.onload(req);
            }
        }
    };
    req.send(conf.data);
    return req;
};

[AndrewMicallef]

Hey man,

I think I'm having the same problem, when I load up the examples on my local system I get this error in the console:

"Media resource data:audio/mpeg;base64,... ... could not be decoded." (truncated to exclude non-english)

Did the above code fix that error and if so where do I insert it?

[acl0056]

On Chrome and Safari, I didn't get anything logged. It would just do nothing. That code goes in the DOMLoader file. I think there were two places if you have to support IE.

[mudcube]

@acl0056 Are you attempting to load from a URL like this:

file://

or something on your localhost:

http://localhost/

?

[acl0056]

I believe it is file://, and I am not sure I have the option of using http://localhost with Phonegap.

[acl0056]

Also, you can tell from my code sample that I get status 0.

[mudcube]

@acl0056 Oh, ok. Cool. That makes sense! I ran into this issue awhile back with another app using XHR. It's a Phonegap/Cordova issue that returns status 0.

I have a newer version of XHR request that takes into account the status 0 (in my Sketchpad branch), but it's not in the main MIDI.js repo yet (it's in the dev channel of MIDI.js but forgot to include the Cordova/Phonegap sniffer). I'll put that on my list of things to do.

[acl0056]

Also on my Mac, previewing in Coda2 uses file:// and it does the same thing.

[mudcube]

@acl0056 Ahh, great to know! My fix does not take that into account (yet)... Same thing meaning it's returning the same status 0 and the jQuery fixes it?

[acl0056]

Yes.

[mrweix]

Thanks for the tip! But I experience very strange behaviour trying to run it with phonegap.

The demo-MIDIPlayer.html will run in phonegap if I include jquery and your hack and start playing this song

     player.loadFile(song[songid++%3], player.start);

     //Joplin - The Entertainer
'data:audio/midi;base64,TVRoZAAAAAYAAAABAYBNVHJrAAAu3QD/UQMH0zQA   /wMAALBAfwBAAABAfwOQPBCBPD4bMIA8QH6QPxoVgD5AgQk/QCKQQxuBDj8..............

But if I try to load a midi file the song will just not play on phonegap.

        player.loadFile("start.mid", player.start);

If I run it in localhost it does play.... Any idea or experience how to solve this and to play midi files on phonegap?

[QuinDennis]

Greetings, I'm working on the same functionality, trying to work with local files only (MIDI.js, jquery, acoustic_grand_piano-ogg.js, local .mid file), then moving it into a phonegap app. Are there updates? I'm getting a CORs error on the ogg. I've even included the ogg.js file, so shouldn't even need to load the soundfont.

[acl0056]

If you are not in PhoneGap yet and using Chrome, launch Chrome from the command line with this flag:

--allow-file-access-from-files

Even easier, in Safari with developer mode turned on, check Disable Local File Restrictions under the Develop menu.

[QuinDennis]

Wow, thanks for the quick response.

C:\Users\Quin>"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

--and this error in the modified XMLDomLoader--- XMLHttpRequest cannot load file:///C:/PW/MIDI/MIDI.js-master/soundfont/acoustic_grand_piano-ogg.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. DOMLoader.XMLHttp.js:136 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/PW/MIDI/MIDI.js-master/soundfont/acoustic_grand_piano-ogg.js'.

On 2/16/2015 8:34 AM, Adam Lockhart wrote:

If you are not in PhoneGap yet and using Chrome, launch Chrome from the command line with this flag:

--allow-file-access-from-files

Even easier, in Safari with developer mode turned on, check Disable Local File Restrictions under the Develop menu.

— Reply to this email directly or view it on GitHub https://github.com/mudcube/MIDI.js/issues/74#issuecomment-74516494.

[acl0056]

You may have to make sure the file you are loading is within the site root as well, meaning the directory that your HTML is in or a subdirectory.

[QuinDennis]

Thanks, it is. mtst.html is in MIDI.js-master

---mtst.html---

---

//Play function play() { //alert(MIDI.get_audio_status()); //MIDI.Player.loadMidiFile('hinematov.mid'); MIDI.loadPlugin({ soundfontUrl: "file://C:/PW/MIDI/MIDI.js-master/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); } }); };

---

On 2/16/2015 9:05 AM, Adam Lockhart wrote:

You may have to make sure the file you are loading is with the site root as well, meaning the directory that your HTML is in or a subdirectory.

— Reply to this email directly or view it on GitHub https://github.com/mudcube/MIDI.js/issues/74#issuecomment-74521330.

[acl0056]

Hmmm... In my project on my Mac, that error goes away when I launch Chrome with that flag. And I am using file://. If that is a dead end, I might recommend setting up a local server so you can load through http. If you don't know what server to use, I might suggest node.js with express.

[QuinDennis]

Yep, that should work. The end game is to get this into a phone app, so we'd like to use local files. I think I'm going to have to look at modifying MIDI.js to use FileSystemObject. I'll see if anyone else is interested.

Thanks for your help and quick responses.

And yes, gotta love that node.js!

On 2/16/2015 10:08 AM, Adam Lockhart wrote:

Hmmm... In my project on my Mac, that error goes away when I launch Chrome with that flag. And I am using file://. If that is a dead end, I might recommend setting up a local server so you can load through http. If you don't know what server to use, I might suggest node.js with express.

— Reply to this email directly or view it on GitHub https://github.com/mudcube/MIDI.js/issues/74#issuecomment-74531446.

[obaidalikhan]

local system is no showing output

[acosme]

@QuinDennis do you achieve "modifying MIDI.js to use FileSystemObject"? i am going to try it with an Ionic App...

[Alexis-B]

If this can be of any interest, I could read local file with firefox without problem using ObjectUrl:

<input type="file"
       onchange="handleLocalFile(this.files)" accept="audio/mid"/>

function handleLocalFile(files) {
	if(files.length != 1){
		console.log('Invalid file selection');
		return;
	}
	f = files[0];
	if(f.type!='audio/mid')
	{
		console.log('Unable to load file');
		return;
	}

	var objectURL = window.URL.createObjectURL(f);

	midi = MIDI.Player;
	midi.loadFile( objectURL , midi.start);
}