how to record audio in javascript
Tags: javascript, programming, beginners, tutorial
Published: 2021-11-01 15:10:41

#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>
```
- 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>
```
- To start recording audio, we need create an audio stream by calling `MediaDevices.getUserMedia()` (you can read more about document [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia))
```
<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>
```
- After create audio stream, pass into `MediaRecorder` and start. (read more about `MediaRecorder` [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder))
```
<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>
```
- 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>
```
- 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>
```
-> 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*