Record Audio

This program demonstrates how to record audio via microphone. Be sure allow this page to use your microphone when you refresh the page. Press the Start button to start recording and press it again to stop recording. The use the Playback control to hear the audio.

RecordAudio.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
	</head>
	<body>
		<div style="width:400px;">
			<fieldset>
    		<legend>Recording</legend>
				<button id="idToggle">Start</button>
				<p id="idStatus">Stopped</p>
			</fieldset>
			<fieldset>
    		<legend>Playback</legend>
				<audio id="idPlayBack" controls></audio>
			</fieldset>
		</div>

		<script type="text/javascript">
			var gqRecorder = null;
			var gqaAudioChunks = [];
			const kqButton = document.getElementById('idToggle');
			const kqPlayBack = document.getElementById('idPlayBack');
			const kqStatus = document.getElementById('idStatus');
			
			const kpfnInitialize = async () => {
				const kqStream = await navigator.mediaDevices.getUserMedia({ audio: true });
				gqRecorder = new MediaRecorder(kqStream);
				gqRecorder.ondataavailable = event => gqaAudioChunks.push(event.data);
				gqRecorder.onstop = () => {
					const kqAudioBlob = new Blob(gqaAudioChunks, { type: 'audio/wav' });
					kqPlayBack.src = URL.createObjectURL(kqAudioBlob);
					gqaAudioChunks = [];
				}
			};

			kqButton.addEventListener('click', () => {
				if (kqButton.textContent == 'Start'){
					kqButton.textContent = 'Stop';
					kqStatus.textContent = 'Recording';
					gqRecorder.start();
				} else {
					kqButton.textContent = 'Start';
					kqStatus.textContent = 'Stopped';
					gqRecorder.stop();
				}
			});
			
			kpfnInitialize();
		</script>
	</body>
</html>

Core JavaScript

Record Audio

RecordAudio.html

Output