moinejf / abc2svg

project moved to https://chiselapp.com/user/moinejf/repository/abc2svg
GNU Lesser General Public License v3.0
47 stars 6 forks source link

using AbcPlay and soundfonts #50

Open jisike opened 6 years ago

jisike commented 6 years ago

I'm trying to use AbcPlay. When I call play it throws this

GET http://127.0.0.1:3000//undefined-0/C0.0 404 (Not Found)

Uncaught (in promise) DOMException: Unable to decode audio data

Heres my code:

function play () {
    if (position == 2) {
      abcPlay.stop();
      endplay()
      return
    }

    position = 2

    if (!abcPlayEvents) { // if no playing event
      if (!abcPlay) {
        abcPlay = new AbcPlay({
          endplay: endplay
        })

        abcPlay.clear(); 
      }

      abcPlayEvents = abcPlay.clear() // keep the playing events
    }

    abcPlay.play(0, 100000, abc)
}

I think this is related to the soundfont url but isn't there a default? When I try:

abcPlay.set_sft(0)
abcPlay.set_sfu('http://moinejf.free.fr/js/FluidR3_GM')

it throws these errors:

GET http://moinejf.free.fr/js/FluidR3_GM/undefined-0/C0.0 404 (Not Found) decode_note @ play.js:5 play_start @ play.js:5 Audio5.Audio5.play @ play.js:5 app.play @ main-debug.js:1038 (anonymous) @ VM6950:1 index-debug.html:1 Failed to load http://moinejf.free.fr/js/FluidR3_GM/undefined-0/C0.0: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access. The response had HTTP status code 404.

And now I think its the instrument but can't find the func to set the instrument. It'd be great if there were documentation for this.

bwl21 commented 6 years ago

Are you sure that you have chosen an instrument which is available? the 'undefined' in the url indicates that your instrument is not in the list of midi instruments which you find in play-1.js.

http://127.0.0.1:3000//undefined-0/C0.0

you also have to set url and type. And you need to copy the files to a folder in your webserver.

jisike commented 6 years ago

How do you set the instrument? Ex a grand piano? Wheres the function?

jisike commented 6 years ago

I see the instr_tb array and load_instr function in audio5 but i searched the repo and dont see it called anywhere.

moinejf commented 6 years ago

From your code, you have nothing to play! For the abc2svg core, you have to define a callback function user.get_abcmodel() that calls abcPlay.add (have a look at util/abcemb.js).

jisike commented 6 years ago

I do I just left that out because its in another code block

abcPlay = new AbcPlay({
  endplay: stop
})
abcPlay.set_sft(0)
abcPlay.set_sfu('http://moinejf.free.fr/js/FluidR3_GM')
// abcPlay.audio5.load_instr('acoustic_grand_piano')

var user = {
  'imagesize': 'width="100%"',
  'img_out': function(str) {
    abcSvg += str;
  },
  'errmsg': function errmsg(txt) {
    errors += txt + '\n'
  },
  'read_file': function(x) {
    return '';
  }, // %%abc-include, unused
  'anno_stop': function(type, start, stop, x, y, w, h) {
    if (name == 'sheet-2') {
      if (type == 'bar') {
        abc2Svg.out_svg('<rect class="bar-box" x="');
        abc2Svg.out_sxsy(x, '" y="', y);
        abc2Svg.out_svg('" width="' + w.toFixed(2) +
          '" height="' + h.toFixed(2) + '"/>\n');
      } else if (type == 'note' || type == 'rest') {
        abc2Svg.out_svg('<rect class="notes-box" x="');
        abc2Svg.out_sxsy(x, '" y="', y);
        abc2Svg.out_svg('" width="' + w.toFixed(2) + '" height="' +
          h.toFixed(2) + '"/>\n');
      }
    }
  },
  'page_format': true, // define the non-page-breakable blocks
  'get_abcmodel': function(tsfirst, voice_tb, music_types, info) { 
    abcPlay.add(tsfirst, voice_tb)
  }
}

abc2Svg = new Abc(user);
abc2Svg.tosvg('abc2Svg', abcTune);

I added a breakpoint to double check 'get_abcmodel' was being called and it is.

jisike commented 6 years ago

im still having issues getting this to work. any more suggestions?

moinejf commented 6 years ago

Start from a working piece of software as abcemb.js and adapt it step by step to your needs. Use a javascript debugger or console.log messages to know what is wrong with your changes.

jisike commented 6 years ago

i already did that... also abcemb.js doesn't help because im generating it from a var not inline abc. could you help by answering questions i asked in my first post about the errors relating to the soundfonts.

moinejf commented 6 years ago

The soundfont may be loaded by two means:

jisike commented 6 years ago

if the default is set to gleitz.github.io should it still play? why is the code looking for the fonts on your server even though I didnt set them? why is the instrument undefined? is there not a default instrument? also when i try and run the example au_clair.xhtml it throws cross-origin errors too. how can i that the examlple locally? could you direct to a soundfont or file i can use to test. thanks!

jisike commented 6 years ago

also http://gleitz.github.io/ is a broken link

moinejf commented 6 years ago

if the default is set to gleitz.github.io should it still play? It should. why is the code looking for the fonts on your server even though I didnt set them? It should not: if you don't set sfu nor sft, the font is searched in gleitz.github.io/. why is the instrument undefined? I don't know. It is your code. is there not a default instrument? There is one: MIDI program 1 (internal value 0). also when i try and run the example au_clair.xhtml it throws cross-origin errors too. If you call it from my site, there is no error. If you copied the source and try to access it directly, you must change the script paths. how can i that the examlple locally? If you got the full abc2svg sources and generated the *-1 files, everything should work with correct paths in your .xhtml files. could you direct to a soundfont or file i can use to test. The fonts are in gleitz.github.io/. See http://gleitz.github.io/midi-js-soundfonts/ for more information, or search in the internet.

joaocc commented 6 years ago

Just 2 quick notes. If you look at https://github.com/moinejf/abc2svg/issues/23 there are ways to get the fonts from github, but you have to use the raw prefix. Also, on the initial image, there is a 'Access-Control-Allow-Origin' message, which usually means that the server is reporting that it doesn't allow serving content to other locations. (please excuse me if I misunderstood the issue)