/AudioUploader

Upload audio files on a site

Primary LanguageJavaScript

AudioUploader

About:

Have some audio message you want to record and keep for later? Well, this is the application for you!
This simple web application will let you record audio, and it will be saved in the public recordings directory.
Try Out The Site here

Client Use:

Homepage 🏠

This page is where you can start recording yourself!
Once you click the microphone button, a prompt in the bottom will pop up.


Image


There, you can click the "●" button to start recording, and then, you can click it again to stop the recording.
After you finish your awesome message, you can press the "✓" button to have it ready to be sent.
You can also tamper with the sliders which are:

  • Pitch
  • Gain

respectively.

Once you're all set and have pressed check, make sure to name your file or it won't send and all your progress is lost!
You can now upload your recording by clicking the upload button or pressing enter.
Congratulations! 🎊
You've sent your audio to AudioUploader! Now, you can head over to your new message by clicking "Recordings" in the top right of the Homepage.


Image


Recordings Directory 🎵

Here is the list of recordings that have been recorded by you and other people!
You can click your recording or other people's recordings.
Once clicked, the File Name, Date, and the Audio Controls are available for you to see and use at the bottom.
Since this is a public directory, you can delete your recordings or even other people's recordings with the x button on the right. (Maybe ask for their permission before deleting it 😉)
After seeing all of the recordings, go and check out the Credits tab in the top right to see the creator!


Image


Technologies 💻:

Frontend:

  • HTML/CSS
  • Templating
    • Handlebars
  • JavaScript
    • VMSG Library
    • Plain JS for buttons & miscellaneous formatting

Backend:

  • NodeJS
    • Express
    • Multer
  • Storage
    • Google Cloud Storage
  • Database
    • MongoDB
  • REST API for:
    • Uploading
    • Deletion
    • Getting Recordings
    • Showing Recordings Data