obsidian-plugin-abcjs icon indicating copy to clipboard operation
obsidian-plugin-abcjs copied to clipboard

Feature Request: Allow Users to Specify soundFontUrl through userOptions

Open jllovet opened this issue 1 year ago • 0 comments

Currently in cfg.ts the soundFontUrl is hard-coded in the SYNTH_INIT_OPTIONS.

export const SYNTH_INIT_OPTIONS: SynthOptions = {
  // Give it a little more room:
  pan: [-0.25, 0.25],
  
  // Sound "fonts".
  // These could be distributed locally with the plugin, but fair warning, they're large (GBs for all notes, I think)
  // soundFontUrl: 'https://paulrosen.github.io/midi-js-soundfonts/abcjs/', // bright, crisp
  soundFontUrl: 'https://paulrosen.github.io/midi-js-soundfonts/FluidR3_GM/', // loud, deeper
  // soundFontUrl: 'https://paulrosen.github.io/midi-js-soundfonts/MusyngKite/', // muted, more mids?
};

It would be nice to be able to have one of these as a default or have the ability to choose which of them the user wants to use. It would be most desirable to have the option to reference public urls or paths in a vault. (Granted, it would probably be a lot to throw a soundfont into a vault because of the sizes of the files.)

The SYNTH_INIT_OPTIONS are imported in playback_element.ts, where they are passed into this.midiBuffer.init in the following:

  enableAudioPlayback(visualObj: TuneObject) {
    if (!synth.supportsAudio()) return;

    // We need the SynthController to drive NoteHighlighter (CursorControl), even though we don't want the UI controls from SynthController
    this.synthCtrl.load(
      `#${PLAYBACK_CONTROLS_ID}`, //controlsEl, // can be an HTMLElement reference or css selector
      new NoteHighlighter(this.el), // an implementation of a `CursorControl`
    );

    this.midiBuffer.init({ visualObj, options: SYNTH_INIT_OPTIONS })
      .then(() => this.synthCtrl.setTune(visualObj, false, AUDIO_PARAMS))
      .catch(console.warn.bind(console));

    const signal = this.abortController.signal; // for event cleanup
    this.el.addEventListener('click', this.togglePlayback, { signal });
    this.el.addEventListener('dblclick', this.restartPlayback, { signal });
  }

PS: The plugin is delightful, and I'm so glad y'all have worked on it!

jllovet avatar Oct 28 '23 17:10 jllovet