Build An Audio Recorder From Scratch | JavaScript Interview Question | React
@Yomesh Gupta

You have to create a small web-app using which user can record audio in the browser, audio visualisation is visible to user in real-time, and data can be sent to the backend.

Audio Recorder UI Mockup Screenshot

Demo link: https://recorder-component.netlify.app/

This is a good question for machine coding round interview. It judges how you tackle you new use-cases, attention to detail, understanding of css, and much more. The different learnings from this question wuld be --

  1. How voice is recorded in the browser.
  2. Sin-waves implementation with a color gradient (the hard part).
  3. Play/Pause button.
  4. Send recording to the backend.

Additional Challenge: Make it scaleable by changing one unit of size.

Checkout original post here.