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)
<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
MediaRecorderand start. (read more aboutMediaRecorderhere)
<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
audiotag. We will useURL.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
Top comments (0)