JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side scripts to interact with the user and make dynamic pages. Here one important thing is that recording audio or video on web pages is also done using JavaScript.
Step 1:- Create an index.html file and add the following code in your HTML file
<!doctype html> <html> <head> <title>Record Audio Test</title> </head> <body> <h1>Audio Recording Test</h1> <p>Talk for 3 seconds, then you will hear your recording played back</p> <script src="index.js"></script> <button id="action" onclick="handleAction()">Start recording...</button> </body> </html>
Step 2:- Create an index.js file and add the following code in your js file
const recordAudio = () =>
new Promise(async resolve => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
const audioChunks = [];
mediaRecorder.addEventListener("dataavailable", event => {
audioChunks.push(event.data);
});
const start = () => mediaRecorder.start();
const stop = () =>
new Promise(resolve => {
mediaRecorder.addEventListener("stop", () => {
const audioBlob = new Blob(audioChunks, { type: "audio/mpeg" });
const audioUrl = URL.createObjectURL(audioBlob);
const audio = new Audio(audioUrl);
const play = () => audio.play();
resolve({ audioBlob, audioUrl, play });
});
mediaRecorder.stop();
});
resolve({ start, stop });
});
const sleep = time => new Promise(resolve => setTimeout(resolve, time));
const handleAction = async () => {
const recorder = await recordAudio();
const actionButton = document.getElementById("action");
actionButton.disabled = true;
recorder.start();
await sleep(3000);
const audio = await recorder.stop();
audio.play();
await sleep(3000);
actionButton.disabled = false;
};
Here’s an example of how to use the API we just created. This example records audio for 3 seconds, then plays the audio that was recorded.
