How to read .gp file from local disk

[dkjMusic]

I worked my way thru the Tutorial (Web) which shows and plays https://www.alphatab.net/files/canon.gp just fine.
Now I'd like to load a .gp file from my D: drive and my attempts have failed.

I changed the tutorial code to read:
// initialize alphatab
const settings = {
file: "///D:/alphaTab/Chet Atkins - Spanish Fandango.gp",
player:
but my browser only shows "Music sheet is loading."
How do I specify a .gp local disk file?

[Danielku15]

Hi there.
It seems you're rather new to web development. Browsers have security mechanism in place which prevent loading files from local disk. Imagine if this would be allowed: any website could load files from your disk without you knowing.

alphaTab loads file via AJAX when using the file property. Any existing browser restrictions apply to load files.

In short: You will need to run alphaTab within a proper webserver and then you can load files from this same domain (keyword CORS). Or you build something that allows users to select a file via file picker & drag+drop. There are many tutorials around how to load files after a user opened it via file picker: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

Instead of the file option, you would use the load method on the API to pass in the loaded data of the file.

[dkjMusic]

Thanks for your reply. Yes, I am completely new to web development. I am anxious to use the method you describe.

[marriusco]

  const fileo = wrapper.querySelector(".at-controls .at-open");
    if(fileo!=null){

    fileo.onclick = (e) => {
      var t = this;
      e.preventDefault();
      var a = document.createElement("input");
      a.type = "file", a.accept = ".gp,.gp3,.gp4,.gp5,.gpx,.musicxml,.mxml,.xml,.capx", a.onchange = function() {
           1 === a.files.length && a.openFile(a.files[0]);
      }, document.body.appendChild(a),
         a.click(),
         document.body.removeChild(a),
         a.openFile=function(e){
            a=new FileReader;
            a.onload=function(e){
                CopyRight=false;
                api.load(e.target.result,[0]);
            },
        }
      };
    };