Breaking News: Grepper is joining You.com. Read the official announcement!

record audio and play javascript with mediaDevices

Ivan Londono answered on August 19, 2022 Popularity 3/10 Helpfulness 9/10

answer record audio and play javascript with mediaDevices

record audio and play javascript with mediaDevices

Comment

<button id="action" onclick="handleAction()">Start recording...</button>
<script>
const recordAudio = () =>
  new Promise(async resolve => {
    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, { type: "audio/mpeg" });
          const audioUrl = URL.createObjectURL(audioBlob);
          const audio = new Audio(audioUrl);
          const play = () => audio.play();
          resolve({ audioBlob, audioUrl, play });
        });

        mediaRecorder.stop();
      });

    resolve({ start, stop });
  });

const sleep = time => new Promise(resolve => setTimeout(resolve, time));

const handleAction = async () => {
  const recorder = await recordAudio();
  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;
};
</script>

Popularity 3/10 Helpfulness 9/10 Language html

Source: Grepper

Tags: audio html javascript mediadevices record

Link to this answer
Share Copy Link

Contributed on Aug 19 2022

Ivan Londono

0 Answers Avg Quality 2/10

record audio and play javascript with mediaDevices

Contents

More Related Answers

record audio and play javascript with mediaDevices

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.