Skip to content

The project demonstrates the usage of a user-defined audio recording API in a website.

Notifications You must be signed in to change notification settings

ralzohairi/js-audio-recording

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Audio Recording Demo using JavaScript and HTML

This project demonstrates the usage of a user-defined audio recording API in a website. The implementation is based on the explained audio recording API here[insert here]. The following is a screenshot of the demo's view.

Key Features

  1. Audio Recording.
  2. Stopping the Audio Recording, where the maximum recording duration is 1 hour.
  3. Listening to the recorded audio played back once recording has stopped.
  4. Canceling the Audio Recording.

Getting Started

  1. Clone the project.
  2. Open index.html in your favorite browser, where now you can start enjoying the demo!

Use Cases

  • Starting the Audio Recording

To start the audio recording, the microphone icon must be clicked. Once the icon is clicked, the audio recording should get started, that is if the user grants permission and if no error has occurred.

When the recording starts, the elapsed recording time is displayed alongside two buttons that allow stopping and canceling the ongoing audio recording.

The following GIF image demonstrates starting the audio recording.

alt text

  • Stopping the Audio Recording

To stop the ongoing audio recording, the stop button should be clicked. Once the audio recording has successfully stopped, the audio is played back to the user.

The following GIF image demonstrates stopping the audio recording.

alt text

  • Cancelling the Audio Recording

To cancel the ongoing audio recording, the cancel button should be clicked. The following GIF image demonstrates stopping the audio recording.

alt text

  • Starting the Audio Recording in a Browser that does not support the Audio Recording API

When the user attempts to start an audio recording in a browser that does not support the audio recording API, a message box will be displayed for the user to inform him why they cannot use the audio recording feature.

The following GIF image shows the message box displayed to the user.

alt text

About

The project demonstrates the usage of a user-defined audio recording API in a website.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published