Question

需要将我的Midi钢琴链接到虚拟钢琴... 我不创建事件来执行此操作。我与网络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

react-piano接受playbackNotes道具，该道具可以解决问题。设置这些音符时，它们会被播放。

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

如果您对反应钢琴有任何疑问，请随时张贴到react-piano github issues！我会更加密切地关注。

将虚拟钢琴与Midi-Keyboard链接

1 个答案: