Hi makenzi.exc,
Refer below example.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
</head>
<body>
<button type="button" class="startRecorder">Start</button>
<button type="button" class="stopRecorder" disabled>Stop</button>
<hr />
<audio id='audioPlayer'></audio>
<script type="text/javascript">
var mediaRecorder;
var audioChunks = [];
var StopRecorder = function () {
if (mediaRecorder.state === 'recording') {
mediaRecorder.stop();
document.getElementsByClassName("stopRecorder")[0].disabled = true;
document.getElementsByClassName("startRecorder")[0].removeAttribute("disabled");
}
}
document.querySelector('.startRecorder').addEventListener('click', function () {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(function (stream) {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
document.getElementsByClassName("startRecorder")[0].disabled = true;
document.getElementsByClassName("stopRecorder")[0].removeAttribute("disabled");
setTimeout(StopRecorder, 10000);
mediaRecorder.addEventListener("dataavailable", function (event) {
audioChunks.push(event.data);
var blob = new Blob(audioChunks, { type: 'audio/x-mpeg-3' });
// Set Blob in audio element.
var audioPlayer = document.getElementById('audioPlayer')
audioPlayer.src = URL.createObjectURL(blob);
audioPlayer.controls = true;
audioPlayer.autoplay = true;
});
});
});
document.querySelector('.stopRecorder').addEventListener('click', StopRecorder);
</script>
</body>
</html>
Demo
Screenshot
Downloads
Download Sample
