paulrosen / abcjs

javascript for rendering abc music notation
Other
1.93k stars 284 forks source link

Cannot change all the properties of audioParams in SynthController.setTune() #732

Open charlotrudel opened 2 years ago

charlotrudel commented 2 years ago

Hi, I am using the SynthController as a way to easily change the midi program without touching the ABC string, but it seems that the "options" property is the only one that can be accessed and changed for the audioParams in setTune(). I am unable to affect the following properties of audioParams:

audioContext soundFontUrl soundFontVolumeMultiplier millisecondsPerMeasure visualObj sequence onEnded

I can directly pass in the properties from the "option" property though. I might be missing something, in which case, please enlighten me! This library is absolutely wonderful!

paulrosen commented 2 years ago

I seriously need to simplify this interface.

From looking at the code it looks like it should work, particularly if you have userAction set to true.

If you post a simple example I'll trace through it and figure out what's wrong.

charlotrudel commented 2 years ago

Here is a truncated example from a react class component. As you can see, the audioParamsobject as written works, but its properties are actually what should be passed as properties to the optionsproperty of audioParams.

class Score extends PureComponent {
  constructor() {
    ...
    this.synthControl = new abcjs.synth.SynthController();
   ...
  }

  ...

  loadVisual() {
    return abcjs.renderAbc(
      this.abcjsdiv,
     this.props.abcString},
      {...}
    );
  }

  load() {
    const audioParams = {
      program: this.props.options.instrument,
      midiTranspose: this.props.cardType === 4 ? -33 : 0,
    };
    this.visualObj = this.loadVisual();

    let CursorControl = function (rootSelector, playButton) {
      ...};

    this.cursorControl = new CursorControl(
      `#${this.abcjsdiv}`,
      `#${this.abcjsplay}`
    );

    this.synthControl.load(`#${this.abcjsplay}`, this.cursorControl);

    if (abcjs.synth.supportsAudio()) {
      this.synthControl
        .setTune(this.visualObj[0], true, audioParams)
    }
  }

 ...

Changing the audioParams objet to fit the docs does not work: the options which worked previously now do nothing, and the added options do not work either:

const audioParams = { soundFontVolumeMultiplier: 0.5, options: { program: this.props.options.instrument, midiTranspose: this.props.cardType === 4 ? -33 : 0, }, };