Please help me.
How to play recorded audio in JavaScript?
After i recorded a audio using the MediaRecorder how to play automatically without click any button?
Hi makenzi.exc,
Use the MediaRecorder.
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
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.