Description
Describe the bug
Whenever I try to play an mp3 back with an Audio element (which works at localhost, on other webpages elsewhere), I capture no sound when using this image with puppeteer-stream: https://github.com/SamuelScheit/puppeteer-stream
To Reproduce
Steps to reproduce the behavior:
Version: latest
Launch any website that uses Audio() elements
Puppeteer related launch flags:
const browser = await launch({
dumpio: true,
// macOS:
// executablePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
// linux (docker):
executablePath: "/usr/bin/chromium-browser",
headless: "new", // supports audio!
// headless: false, // for debugging
defaultViewport: { width: 1920, height: 1080 },
args: [
'--window-size=1920,1080',
'--start-fullscreen',
'--ozone-override-screen-size=1920,1080', // for linux
'--no-sandbox', // to run as root on docker
'--autoplay-policy=no-user-gesture-required',
// '--disable-web-security',
// '--allow-file-access-from-files',
// '--allow-file-access',
// '--allow-local-file-accesses',
// '--enable-local-file-accesses',
// '--allow-universal-access-from-file-urls',
// '--disable-site-isolation-trials',
// '--disable-features=BlockInsecurePrivateNetworkRequests'
// '--enable-logging=stderr', // Enable detailed logging
// '--v=1', // Increase verbosity level
],
ignoreDefaultArgs: ['--mute-audio']
});The relevant source code of all the ways I'm trying to play audio (heavy error handling because I was trying to find the root cause)
console.log("Creating audio element for MP3 URL:", mp3Url);
console.log("Volume", volume);
const audioElement = new Audio(mp3Url);
audioElement.volume = volume;
audioElement.onended = () => {
resolve();
};
audioElement.onerror = (e: string | Event) => {
if (typeof e === 'string') {
console.error("Audio playback error:", e);
} else {
try {
// e is an Event
console.error("Audio error event:", e.type);
// Access specific properties if available, for instance:
if (e.target && (e.target as any).error) {
console.error("Error details:", (e.target as any).error);
}
} catch (e) {
console.error("Failed to extract error details:", e);
}
}
resolve(); // Resolve instead of rejecting to prevent errors from bubbling up
};
audioElement.play().catch(async error => {
try {
if (error instanceof Error) {
console.error(`${error.name}: ${error.message}\nStack: ${error.stack}`);
} else {
console.error(String(error));
}
// Option 1: Convert error to string directly
console.error(String(error));
// Extract the 'message' property from the error handle
const messageHandle = await error.getProperty('message');
const message = await messageHandle.jsonValue();
console.error("Failed to play audio:", message);
} catch (e) {
console.error("Failed to extract error message:", e);
}
resolve(); // Resolve despite the error
});
return;What is the expected behavior?
Audio elements should play audio.
What is the actual behavior?
NotSupportedError: Failed to load because no supported source was found.
Possible solution
Including basic audio libraries or tools in the image?
Logs
Some output from my puppeteer stdout, you can see the mp3 can be fetched, converted to blog and everything, it just can't be played in chromium:
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: Fetching audio from: http://codevideo-api:7000/audio/transcoded_bf760eafd7a4d5e1ae4b7559ab6666cb8c898d1bdf654125ff3e1b924c5a5a1f.mp3
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: Creating audio element for MP3 URL: http://codevideo-api:7000/audio/transcoded_bf760eafd7a4d5e1ae4b7559ab6666cb8c898d1bdf654125ff3e1b924c5a5a1f.mp3
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: Volume 1
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: Received blob of type: audio/mpeg, size: 14254 bytes
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: Converted to data URL, length: 19031
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: Playing audio from data URL...
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: Audio error event: error
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: Error details: JSHandle@object
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: Play error: JSHandle@error
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: Audio error event: error
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: Error details: JSHandle@object
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: Going to next action...
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: NotSupportedError: Failed to load because no supported source was found.
2025/03/14 00:22:07 [Puppeteer stdout]: Stack: undefined
2025/03/14 00:22:07 [Puppeteer stdout]: BROWSER LOG: NotSupportedError: Failed to load because no supported source was found.
Versions
All :latest, I literally tried this today.
| Software | Version(s) | How-to |
|---|---|---|
| Chromium | 76.0.3809.87 | docker container run -it --rm --entrypoint "" zenika/alpine-chrome chromium-browser --version |
| Image | ad3dc8 | docker image inspect --format='{{index .RepoDigests 0}}' zenika/alpine-chrome |
| Docker Engine | 28.0.1 | docker version |
Additional context
I'm surprised I couldn't find any other audio-related issues. Is this either 1. such a niche use case nobody has ever noticed? or 2. something that should actually work out of the box with this image and the error is still on my side after everything I've tried?