Possible to Get Puppeteer Audio Feed and/or Input Audio Directly to Puppeteer?

Question

I want to input WAV or MP3 into puppeteer as a microphone, however while in headless the application is muted, so I was wondering if there was a way to get input directly into the browser.

I am also wondering if it's possible to get a feed of audio from the browser while in headless, and/or record the audio and place it in a folder.

Answer 1

I ended up using this solution. First, I enabled some options for Chromium:

const browser = await puppeteer.launch({
  args: [
    '--use-fake-ui-for-media-stream',
  ],
  ignoreDefaultArgs: ['--mute-audio'],
});

Remember to close Chromium if it is open already.

I created an <audio> element with the src set to the file that I wanted to input. I also overrode navigator.mediaDevices.getUserMedia, so that it returns a Promise with the same stream as the audio file, rather than from the microphone.

const page = await browser.newPage();
await page.goto('http://example.com', {waitUntil: 'load'});
await page.evaluate(() => {
  var audio = document.createElement("audio");
  audio.setAttribute("src", "http://example.com/example.mp3");
  audio.setAttribute("crossorigin", "anonymous");
  audio.setAttribute("controls", "");
  audio.onplay = function() {
    var stream = audio.captureStream();
    navigator.mediaDevices.getUserMedia = async function() {
       return stream;
    };
  });
  document.querySelector("body").appendChild(audio);
});

Now whenever the website's code calls navigator.mediaDevices.getUserMedia, it will get the audio stream from the file. (You need to make sure the audio is playing first.)