react-music icon indicating copy to clipboard operation
react-music copied to clipboard

[WIP] record audio to file

Open davidnaas opened this issue 9 years ago • 7 comments

This pr adds a <Recorder> component used to generate a wav file of what it's wrapping over. It takes two props, isRecording and onRecordStop. The component will start recording as soon as it's created and will stop when isRecording is set to false. The onRecordStop property is a callback function that will be called with the generated blob when the recording stops. It is up to the user to decide what to do with that data. In the demo app, there's an example of how to generate a download link from the blob of audio.

TODO:

  1. Use flow
  2. Render file with offline context and/or get rid of clicks and pop in exported file

davidnaas avatar Aug 28 '16 20:08 davidnaas

Whoah! Nice job. So I think you should be able to do a dual connection. Check out how the Analyser does the scriptProcessor. Make the recorder a component will a callback that wraps the part you want to record, and then you can hook into the UI the same way the Analyser does.

kenwheeler avatar Aug 28 '16 21:08 kenwheeler

Thanks! Yeah the wrapping thing might be more in line with the rest of the code base. My thinking was that you never want to record anything but the song itself. But I'll give that a shot!

Another idea would be to use an offline audio context to instantly render an explicit number of bars/loops to a file. Since the whole system currently is deterministic (there's no live input/manipulation, right?) there's really no point in letting it play through in realtime to do it. This would probably also be more performant. I noticed that the current implementation suffers a bit from clicks and pops in the recording which most likely is the processor node failing intermittently due to performance issues and too short buffer length.

davidnaas avatar Aug 29 '16 08:08 davidnaas

Offline would be spectacular, especially with a loop count as a prop.

kenwheeler avatar Aug 29 '16 13:08 kenwheeler

Will look into it! Hopefully will have some more time later this week!

davidnaas avatar Aug 30 '16 08:08 davidnaas

@kenwheeler This is starting to come together! I managed to fix the recorder muting the audio and turned it into a component. I also talked to some web audio peeps and apparently it's not possible to connect a node to two different contexts. So either the "instant" recorder would have to work without the app being playable, or I find a way to duplicate the tree of nodes and connect that copy to the offline context.

davidnaas avatar Sep 01 '16 21:09 davidnaas

Any status update on this? Is there a work around for accessing the audio context and using a different library to do the recording bit?

wyhinton avatar Sep 12 '21 17:09 wyhinton

@wyhinton Thanks for checking in with us. This project moved to an "Archived" maintenance status 2 years ago, and is no longer maintained by Formidable. We encourage interested developers to fork this project and make it their own!

https://github.com/FormidableLabs/react-music#maintenance-status

carbonrobot avatar Sep 13 '21 17:09 carbonrobot