This is a service consisting of a Javascript (React) frontend and Node backend for quickly and easily recording, storing, removing, and sharing short audio recordings made natively in the browser.
- Javascript (React),
- Node.js.
- Frontend (website):
- Uses React with Material-UI to present a responsive and simple UI,
- Uses the Media Stream API for native in-browser audio recording, compression, and playback,
- Uses uuid and the Web Storage API for identification purposes (no manual login/registration required to provide a list of a particular browser's past recordings).
- Backend (server):
- Uses Express to provide a simple server,
- Uses Multer for handling file uploads,
- Uses lowdb for storing a database of recordings per user,
- Regularly removes old recordings and their corresponding entries.
Mostly practicing React, Node, and using various APIs.
That being said, there is a surprising lack of websites offering quick and easy ways of sharing and storing recordings made with the use of the Media Stream API. Most either still use Flash or only offer downloads of the recordings, without being able to share the recordings with others.
- Provide necessary permissions,
- Press record button (note: the Media Stream API only allows for recording on localhost or https),
- Press stop button or wait 5 minutes,
- Press play button to listen to recording (optional),
- Press upload button,
- Press copy icon next to new entry in list of recordings,
- Share recording with other people.
Check out this demo right here.
git clone https://github.com/54ac/voice-memo.git .npm inpm start
-
Upload demo, - Split the record and play modes into separate components? Having them combined into one component is good for minmaxing purposes, but it's a bit of a mess to maintain,
- Move database to some NoSQL database (MongoDB)? Could be overkill.