Categories: JavaScript

Recording Audio Using JavaScript

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" >
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.