Loading and playing an MP3 in a headless browser

test-playback.js

const puppeteer = require('puppeteer');

const testSrc = 'https://download.samplelib.com/mp3/sample-3s.mp3';
const audioEventTypes = [
  'audioprocess',
  'canplay',
  'canplaythrough',
  'complete',
  'durationchange',
  'emptied',
  'ended',
  'loadeddata',
  'loadedmetadata',
  'pause',
  'play',
  'playing',
  'ratechange',
  'seeked',
  'seeking',
  'stalled',
  'suspend',
  'timeupdate',
  'volumechange',
  'waiting',
];

(async () => {
  const browser = await puppeteer.launch({
    // This shows
    dumpio: true,
  });

  const page = await browser.newPage();
  await page.goto('https://example.com'); // would be a docker-hosted page most likely

  await page.evaluate(
    (testSrc, eventTypes) =>
      new Promise((resolve, reject) => {
        function logAllAudioEvents(audio) {
          eventTypes.forEach((eventType) =>
            audio.addEventListener(eventType, (e) => console.log(eventType, e))
          );
        }

        try {
          const a = new Audio();
          logAllAudioEvents(a);
          a.src = testSrc;
          // VM314:17 suspend Event {isTrusted: true, type: "suspend", target: audio, currentTarget: audio, eventPhase: 2, …}
          // VM314:5 durationchange Event {isTrusted: true, type: "durationchange", target: audio, currentTarget: audio, eventPhase: 2, …}
          // VM314:9 loadedmetadata Event {isTrusted: true, type: "loadedmetadata", target: audio, currentTarget: audio, eventPhase: 2, …}
          // VM314:8 loadeddata Event {isTrusted: true, type: "loadeddata", target: audio, currentTarget: audio, eventPhase: 2, …}
          // VM314:2 canplay Event {isTrusted: true, type: "canplay", target: audio, currentTarget: audio, eventPhase: 2, …}
          // VM314:3 canplaythrough Event {isTrusted: true, type: "canplaythrough", target: audio, currentTarget: audio, eventPhase: 2, …}

          a.addEventListener('ended', () => resolve());
          return a.play(); // a promise that resolves on start of playback
          // VM314:11 play Event {isTrusted: true, type: "play", target: audio, currentTarget: audio, eventPhase: 2, …}
          // VM314:12 playing Event {isTrusted: true, type: "playing", target: audio, currentTarget: audio, eventPhase: 2, …}
          // VM314:18 timeupdate Event {isTrusted: true, type: "timeupdate", target: audio, currentTarget: audio, eventPhase: 2, …}
          // ...repeated...
          // VM314:18 timeupdate Event {isTrusted: true, type: "timeupdate", target: audio, currentTarget: audio, eventPhase: 2, …}
          // VM314:10 pause Event {isTrusted: true, type: "pause", target: audio, currentTarget: audio, eventPhase: 2, …}
          // VM314:7 ended Event {isTrusted: true, type: "ended", target: audio, currentTarget: audio, eventPhase: 2, …}
        } catch (e) {
          reject(e);
        }
      }),
    testSrc,
    audioEventTypes
  );

  await browser.close();
})();