If not working copy the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voice Recorder</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="container">
<h1>Voice Recorder</h1>
<button id="startRecording">Start Recording</button>
<button id="stopRecording" disabled>Stop Recording</button>
<audio id="recordedAudio" controls></audio>
</div>
<script>
let mediaRecorder;
let recordedChunks = [];
const startRecordingButton = document.getElementById('startRecording');
const stopRecordingButton = document.getElementById('stopRecording');
const recordedAudio = document.getElementById('recordedAudio');
startRecordingButton.addEventListener('click', startRecording);
stopRecordingButton.addEventListener('click', stopRecording);
async function startRecording() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function (e) {
recordedChunks.push(e.data);
};
mediaRecorder.onstop = function () {
const blob = new Blob(recordedChunks, { type: 'audio/wav' });
recordedAudio.src = URL.createObjectURL(blob);
};
startRecordingButton.disabled = true;
stopRecordingButton.disabled = false;
recordedChunks = [];
mediaRecorder.start();
} catch (err) {
console.error('Error starting recording: ', err);
}
}
function stopRecording() {
if (mediaRecorder.state === 'recording') {
mediaRecorder.stop();
startRecordingButton.disabled = false;
stopRecordingButton.disabled = true;
}
}
</script>
</body>
</html>