How to record audio and play it in webpage
Reference:
https://medium.com/@bryanjenningz/how-to-record-and-play-audio-in-javascript-faa1b2b3e49b
HTML Code:
```
<!doctype html>
<html>
<head>
<title>Record Audio Test</title>
</head>
<body>
<h1>Audio Recording Test</h1>
<p>Talk for 3 seconds, then you will hear your recording played back</p>
<script src="index.js"></script>
<button id="action" onclick="handleAction()">Start recording...</button>
</body>
</html>
```
Javascript Code:
```
const recordAudio = async () => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
const audioChunks = [];
mediaRecorder.addEventListener("dataavailable", event => {
audioChunks.push(event.data);
});
const start = () => mediaRecorder.start();
const stop = () =>
new Promise(resolve => {
mediaRecorder.addEventListener("stop", () => {
const audioBlob = new Blob(audioChunks);
const audioUrl = URL.createObjectURL(audioBlob);
const audio = new Audio(audioUrl);
const play = () => audio.play();
resolve({ audioBlob, audioUrl, play });
});
mediaRecorder.stop();
});
return { start, stop };
}
const handleAction = async () => {
const sleep = time => new Promise(resolve => setTimeout(resolve, time));
const recorder = await recordAudio();
console.log(recorder)
const actionButton = document.getElementById('action');
actionButton.disabled = true;
recorder.start();
await sleep(3000);
const audio = await recorder.stop();
audio.play();
await sleep(3000);
actionButton.disabled = false;
console.log("That's it, said by yIngshaoxo")
}
```
https://medium.com/@bryanjenningz/how-to-record-and-play-audio-in-javascript-faa1b2b3e49b
HTML Code:
```
<!doctype html>
<html>
<head>
<title>Record Audio Test</title>
</head>
<body>
<h1>Audio Recording Test</h1>
<p>Talk for 3 seconds, then you will hear your recording played back</p>
<script src="index.js"></script>
<button id="action" onclick="handleAction()">Start recording...</button>
</body>
</html>
```
Javascript Code:
```
const recordAudio = async () => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
const audioChunks = [];
mediaRecorder.addEventListener("dataavailable", event => {
audioChunks.push(event.data);
});
const start = () => mediaRecorder.start();
const stop = () =>
new Promise(resolve => {
mediaRecorder.addEventListener("stop", () => {
const audioBlob = new Blob(audioChunks);
const audioUrl = URL.createObjectURL(audioBlob);
const audio = new Audio(audioUrl);
const play = () => audio.play();
resolve({ audioBlob, audioUrl, play });
});
mediaRecorder.stop();
});
return { start, stop };
}
const handleAction = async () => {
const sleep = time => new Promise(resolve => setTimeout(resolve, time));
const recorder = await recordAudio();
console.log(recorder)
const actionButton = document.getElementById('action');
actionButton.disabled = true;
recorder.start();
await sleep(3000);
const audio = await recorder.stop();
audio.play();
await sleep(3000);
actionButton.disabled = false;
console.log("That's it, said by yIngshaoxo")
}
```