用midi键盘连接虚拟钢琴

Question

需要将我的midi钢琴链接到虚拟钢琴...我不知道如何创建一个事件来做到这一点。我有web-midi和react-piano的连接，但我不知道如何将midi钢琴和虚拟钢琴联系起来。我得到了输入信息和键号，但当我点击钢琴midi时，我不知道如何演奏虚拟钢琴。

const noteRange = {
  first: MidiNumbers.fromNote('c1'),
  last: MidiNumbers.fromNote('f5'),
};

export default class ResponsivePiano extends React.Component {

  state={
    midiNote:'',
  }
  onNoteOnMidiKeyboard=(event) => {
    this.setState({
      midiNote: event.note
    });
  }

  componentDidMount(){

    WebMidi.enable((err) => {
      if (err) {
        console.log(' WebMidi n\'a pas pu être activé. ', err);
      } else {
        console.log(' WebMidi activé! ');
      }

      const input = WebMidi.inputs[0];
      input.addListener('noteon', 'all', this.onNoteOnMidiKeyboard.bind(this));

      console.log(WebMidi.inputs);
      console.log(WebMidi.outputs);

    });

  }


  render(){
    const { midiNote } = this.state;

    return (
      <div>
        <p>
        Midi number: {midiNote.number}


        </p>
        <DimensionsProvider>
          {({ containerWidth, containerHeight }) => (
            <SoundfontProvider
              instrumentName="acoustic_grand_piano"
              audioContext={audioContext}
              hostname={soundfontHostname}
              render={({ isLoading, playNote, stopNote }) => (
                <Piano
                  onChange={this.onCurrentNote}
                  noteRange={noteRange}
                  width={containerWidth}
                  onPlayNote={playNote}
                  onStopNote={stopNote}
                  disabled={isLoading}
                />
              )}
            />
          )}
        </DimensionsProvider>
        {}
      </div>
    );

  }


  }

Answer 1

反应钢琴接受一个playbackNotes道具，这应该可以做到这一点。当您设置这些音符时，它们会被回放。

<Piano
  // ...other props
  playbackNotes={[this.state.midiNote.number]}
/>

如果你有任何关于react-钢琴的问题，请随时在react-piano github issues上交叉发帖！我更密切地关注着这一点。