audio.js

const recordButton = document.querySelector("#record");
const stopButton = document.querySelector("#stop");

let recorder, streams, start;

const fixDuration = (blob, duration) =>
  new Promise((resolve) =>
    ysFixWebmDuration(blob, duration, (result) => resolve(result))
  );

function createRecorder(stream) {
  const recorder = new MediaRecorder(stream, {
    mimeType: "audio/webm",
    audioBitsPerSecond : 12000,
  });
  const chunks = [];
  recorder.ondataavailable = (e) => chunks.push(e.data);
  recorder.onstop = async function () {
    const blob = new Blob(chunks, { type: "audio/webm" });
    const fixedBlob = await fixDuration(blob, Date.now() - start);
    const videoURL = window.URL.createObjectURL(fixedBlob);
    const downloadLink = window.document.createElement("a");

    document.body.appendChild(downloadLink);
    downloadLink.href = videoURL;

    const name =
      new Date()
        .toISOString()
        .replace(/[^0-9]/g, "")
        .substr(0, 14) + ".webm";

    downloadLink.setAttribute("download", name);
    downloadLink.setAttribute("name", name);

    downloadLink.click();
    window.URL.revokeObjectURL(videoURL);
    downloadLink.remove();
  };
  recorder.start();
  return recorder;
}

async function onRecordClicked() {
  try {
    if (
      window.MediaRecorder == undefined ||
      !navigator.mediaDevices.getDisplayMedia
    ) {
      alert("Your browser is not supported.");
      return false;
    }
  
    if (
      (await navigator.mediaDevices.enumerateDevices()).filter(
        (device) => device.kind == "audioinput"
      ).length == 0
    ) {
      alert("No audio devices found.");
      return false;
    }

    const screenStream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
    
    const micStream = await navigator.mediaDevices.getUserMedia({
      audio: true,
    });

    const composedStream = new MediaStream();
    if (screenStream.getAudioTracks().length > 0) {
      const context = new AudioContext();
      const audioDestination = context.createMediaStreamDestination()
      context.createMediaStreamSource(screenStream).connect(audioDestination);

      if (micStream && micStream.getAudioTracks().length > 0) {
        context.createMediaStreamSource(micStream).connect(audioDestination);
      } else {
        alert("Please connect a microphone.");
        return false;
      }

      for (const audioTrack of audioDestination.stream.getAudioTracks()) {
        composedStream.addTrack(audioTrack);
      }
    } else {
      alert('Please check "Share audio" in the "Choose what to share" dialog. If you can\'t see it, select the tab you want to record first.');
      return false;
    }

    recorder = createRecorder(composedStream);
    screenStream.getVideoTracks()[0].addEventListener("ended", onStopClicked);
    streams = [composedStream, screenStream, micStream];

    recordButton.disabled = true;
    stopButton.disabled = false;
    start = Date.now();
    return true;
  } catch (e) {
    alert("Could not start recording: " + e.message.toLowerCase() + ".");
    return fal
  }
}

function onStopClicked() {
  recorder.stop();
  for (const stream of streams) {
    for (const track of stream.getTracks()) {
      track.stop();
    }
  }
  recordButton.disabled = false;
  stopButton.disabled = true;
}