title: link virtual piano with midi-Keyboard
body: <p>need to link my midi piano to virtual piano...
  I don't how to create an event to do this.
  I have the connexion with web-midi and react-piano, but i don't how to link  the midi piano with virtual piano. I get the input information and the key number, but i don't know how to play virtual piano when i click on piano midi.</p>
  
  <pre><code>const noteRange = {
    first: MidiNumbers.fromNote('c1'),
    last: MidiNumbers.fromNote('f5'),
  };
  
  export default class ResponsivePiano extends React.Component {
  
    state={
      midiNote:'',
    }
    onNoteOnMidiKeyboard=(event) =&gt; {
      this.setState({
        midiNote: event.note
      });
    }
  
    componentDidMount(){
  
      WebMidi.enable((err) =&gt; {
        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 (
        &lt;div&gt;
          &lt;p&gt;
          Midi number: {midiNote.number}
  
  
          &lt;/p&gt;
          &lt;DimensionsProvider&gt;
            {({ containerWidth, containerHeight }) =&gt; (
              &lt;SoundfontProvider
                instrumentName="acoustic_grand_piano"
                audioContext={audioContext}
                hostname={soundfontHostname}
                render={({ isLoading, playNote, stopNote }) =&gt; (
                  &lt;Piano
                    onChange={this.onCurrentNote}
                    noteRange={noteRange}
                    width={containerWidth}
                    onPlayNote={playNote}
                    onStopNote={stopNote}
                    disabled={isLoading}
                  /&gt;
                )}
              /&gt;
            )}
          &lt;/DimensionsProvider&gt;
          {}
        &lt;/div&gt;
      );
  
    }
  
  
    }
  </code></pre>