Skip to content

Instantly share code, notes, and snippets.

@maslade
Created July 9, 2021 13:15
Show Gist options
  • Save maslade/ccd51be90700d9a9f7681b03036f175b to your computer and use it in GitHub Desktop.
Save maslade/ccd51be90700d9a9f7681b03036f175b to your computer and use it in GitHub Desktop.
Loading and playing an MP3 in a headless browser
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();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment