Question: How do I record the input and save it so I can use it later for play along like a piano learning app? about react-piano

[kevinsqi]

Hi @SeunghunSunmoonLee! Good question. The way I do this is to save the played notes during either onPlayNote or onStopNote (I use onStopNote).

For example,

class App extends React.Component {
  state = {
    recordedNotes: [],
  }

  playNote = (midiNumber, prevActiveNotes) => {
    // ...whatever you're doing to actually play a sound for midiNumber
  }

  stopNote = (midiNumber, prevActiveNotes) => {
    // ...whatever you're doing to stop playing sound for midiNumber

    // react-piano actually gives you the notes that were being played (prevActiveNotes)
    // right before stopNote occurs, so you can use this to record notes.
    this.setState({
      recordedNotes: recordedNotes.concat(prevActiveNotes),
    });
  }

  render() {
    <Piano
      onPlayNote={this.playNote}
      onStopNote={this.stopNote}
      {...other props...}
    />
  }

There's actually a bit more to this logic needed if you want to record chords correctly. I'm planning to create a comprehensive codesandbox soon that covers what you need to do to record and play back input. Hope this can help you get started though.

[shsunmoonlee]

Hi Kevin, thanks for the reply. I came up with saving midiNumber, timing as follow. But this is far from perfect since it misses many input data such as duration of the key, duration of the space between, intensity of the note played, activenotes played at the same time.

  record(input) {
    this.setState((state, props) => {
      return {
        recording: [...state.recording, input]
      }
    })
  }

I have following two questions.

1. How can I play array of midi numbers with time with web audio api or midi api or sound font player or react-piano?
2. Is there a way to record using MediaStreamRecord

Currently my brain is battling with these resources. Helps appreciated!
references:
https://stackoverflow.com/questions/14418530/record-sounds-from-audiocontext-web-audio-api
https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element
https://github.com/higuma/web-audio-recorder-js/blob/master/lib/WebAudioRecorder.js
https://codepen.io/kulak-at/pen/oqbKpq
https://hackernoon.com/a-web-audio-experiment-666743e16679

[kevinsqi]

Sorry, I've been pretty busy and haven't had a chance to take a look at this - I'll be able to get back to you more in depth by the end of this weekend.

[kevinsqi]

@SeunghunSunmoonLee sorry for getting back to you later than expected. I had to actually do a new release (v3.1.0) to make the API more intuitively support recording/playback (so I recommend upgrading to v3.1.0 first).

I've written up a full featured demo of an app that uses soundfont-player for playback, and records notes that are played and allows you to then play the recorded notes back: https://codesandbox.io/s/l4jjvzmp47

The code is a little complex but it demonstrates how to record "events" that can be played back. Hope this helps.

[kevinsqi]

Did the demo app help? Going to close this issue for now but feel free to re-open and update this with any additional questions you have. Thanks!