DEV Community

duccanhole
duccanhole

Posted on

how to record audio in javascript

Do you want to make audio record by javascript? Let's start with me.

  • First, create 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>Document</title>
</head>
<body>
    <audio id="audio" controls></audio>
    <button name="record">record</button>
    <button name="stop">stop</button>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Ok, done. Next step we will use javascript to get element html and handle event
<script>
var btnStart = document.querySelector('button[name="record"]');
var btnStop = document.querySelector('button[name="stop"]');
var audio = document.querySelector('#audio');
btnStart.addEventListener('click', async () => {
    //event will handle here
})
</script>
Enter fullscreen mode Exit fullscreen mode
  • To start recording audio, we need create an audio stream by calling MediaDevices.getUserMedia() (you can read more about document here)
<script>
    var btnStart = document.querySelector('button[name="record"]');
    var btnStop = document.querySelector('button[name="stop"]');
    var audio = document.querySelector('#audio');
    btnStart.addEventListener('click', async () => {
        let stream = await navigator.mediaDevices.getUserMedia({audio: true, video: false});
    })
</script>
Enter fullscreen mode Exit fullscreen mode
  • After create audio stream, pass into MediaRecorder and start. (read more about MediaRecorder here)
<script>
    var btnStart = document.querySelector('button[name="record"]');
    var btnStop = document.querySelector('button[name="stop"]');
    var audio = document.querySelector('#audio');
    btnStart.addEventListener('click', async () => {
        let stream = await navigator.mediaDevices.getUserMedia({audio: true, video: false});
        let mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start();
   })
</script>
Enter fullscreen mode Exit fullscreen mode
  • Now we can start recording, but we haven't saved any of the recorded audio. So we need do it by collecting chunks of audio data.
<script>
    var btnStart = document.querySelector('button[name="record"]');
    var btnStop = document.querySelector('button[name="stop"]');
    var audio = document.querySelector('#audio');
    btnStart.addEventListener('click', async () => {
        let stream = await navigator.mediaDevices.getUserMedia({audio: true, video: false});
        let mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start();
        let chunks = [];
        mediaRecorder.ondataavailable = (e)=>{
             chunks.push(e.data);
        }
        //function to catch error
        mediaRecorder.onerror = (e)=>{
             alert(e.error);
        }
    })
</script>
Enter fullscreen mode Exit fullscreen mode
  • Ok, now I want when audio recording stop, It will create url so that we can pass into src attribute of audio tag. We will use URL.createObjectURL()
<script>
    var btnStart = 0document.querySelector('button[name="record"]');
    var btnStop = document.querySelector('button[name="stop"]');
    var audio = document.querySelector('#audio');
    btnStart.addEventListener('click', async () => {
        let stream = await navigator.mediaDevices.getUserMedia({audio: true, video: false});
        let mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start();
        let chunks = [];
        mediaRecorder.ondataavailable = (e)=>{
             chunks.push(e.data);
        }
        //function to catch error
        mediaRecorder.onerror = (e)=>{
             alert(e.error);
        }

        mediaRecorder.onstop = (e)=>{
             let blod = new Blob(chunks);
             //create url for audio
             let url = URL.createObjectURL(blod);
             //pass url into audio tag
             audio.src = url;
        }
        btnStop.addEventListener('click',()=>{
             mediaRecorder.stop();
        })
    })
</script>
Enter fullscreen mode Exit fullscreen mode

-> This is a pretty simple example of how to make audio record; but you can add some feature (or css) to make it cooler. If you have any question, please comment below.
Thanks for reading <3

Top comments (0)