Audio Recorder Tool is a smart tool written in Javascript, HTML and CSS, that has the ability to record your voice and download it accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Recorder Tool</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
}
.recorder {
text-align: center;
background: #fff;
color: #000;
border-radius: 12px;
padding: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.recorder button {
background-color: #6a11cb;
color: #fff;
border: none;
padding: 10px 20px;
margin: 10px;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.recorder button:hover {
background-color: #2575fc;
}
.recorder button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.recorder audio {
margin-top: 20px;
width: 100%;
}
</style>
</head>
<body>
<div class="recorder">
<h1>Audio Recorder Tool</h1>
<button id="startBtn">Start Recording</button>
<button id="stopBtn" disabled>Stop Recording</button>
<audio id="audioPlayback" controls></audio>
<a id="downloadLink" style="display:none;" download="recording.wav">Download Recording</a>
</div>
<script>
let mediaRecorder;
let recordedChunks = [];
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const audioPlayback = document.getElementById('audioPlayback');
const downloadLink = document.getElementById('downloadLink');
startBtn.addEventListener('click', async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = event => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'audio/wav' });
const audioURL = URL.createObjectURL(blob);
audioPlayback.src = audioURL;
downloadLink.href = audioURL;
downloadLink.style.display = 'inline-block';
};
mediaRecorder.start();
startBtn.disabled = true;
stopBtn.disabled = false;
downloadLink.style.display = 'none';
recordedChunks = [];
} catch (err) {
alert('Error accessing microphone: ' + err.message);
}
});
stopBtn.addEventListener('click', () => {
mediaRecorder.stop();
startBtn.disabled = false;
stopBtn.disabled = true;
});
</script>
</body>
</html>