Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Firefox HTMLAudioElement autoplays without user interaction #33868

Open
andy-fillebrown opened this issue Dec 5, 2024 · 3 comments
Open

[Bug]: Firefox HTMLAudioElement autoplays without user interaction #33868

andy-fillebrown opened this issue Dec 5, 2024 · 3 comments
Labels
browser-firefox

Comments

@andy-fillebrown
Copy link

Version

1.49.0

Steps to reproduce

Run the following test with the firefox browser:

import { expect, test } from "@playwright/test";

test("HTMLAudioElement.play should not autoplay without user gesture", async ({ browser }) => {
    const context = await browser.newContext({ ignoreHTTPSErrors: true });

    const page = await context.newPage();

    await page.route("http://run.test/script.html", async (route) => {
        route.fulfill({
            status: 200,
            contentType: "text/html",
            body: `
                <script>
                    const onLoad = async () => {
                        const audioContext = new AudioContext();

                        const gainNode = new GainNode(audioContext);
                        gainNode.connect(audioContext.destination);
                        gainNode.volume = 0.01;

                        const mediaElement = new Audio("https://ia600505.us.archive.org/13/items/lp_sound-effects-volume-14_unknown-artist/disc1/02.14.%20Rain.mp3");
                        mediaElement.crossOrigin = "anonymous";

                        mediaElement.addEventListener("canplaythrough", () => {
                            mediaElement.play();
                            
                            console.log("audioContextState:", audioContext.state);
                            window.audioContextState = audioContext.state;
                        });

                        const sourceNode = new MediaElementAudioSourceNode(audioContext, { mediaElement });
                        sourceNode.connect(gainNode);

                        mediaElement.load();
                    }
                </script>
                <body onLoad="onLoad()">
                </body>
            `,
        });
    });

    await page.goto("http://run.test/script.html");

    await page.waitForFunction(() => (window as any).audioContextState, { timeout: 10000 });

    const state = await page.evaluate(() => {
        return (window as any).audioContextState;
    });

    expect(state).toBe("suspended");
});

Expected behavior

I expect the audio context state to be "suspended" when the Audio instance is played without a user gesture.

The test passes on chrome and safari. Only firefox has this issue.

Actual behavior

The audio context state changes to "running" when the Audio instance is played without a user gesture.

Additional context

No response

Environment

System:
    OS: macOS 14.7.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 81.39 MB / 16.00 GB
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
  IDEs:
    VSCode: 1.95.3 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/test: ^1.48.2 => 1.50.0-next
@andy-fillebrown
Copy link
Author

Note that the HTML listed in the test fails to play in the production version of Firefox which logs the following error to the console as expected:

Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

@Skn0tt
Copy link
Member

Skn0tt commented Dec 5, 2024

Please provide a self-contained reproduction, which we can run locally to reproduce your issue.

@yury-s
Copy link
Member

yury-s commented Dec 9, 2024

I can reproduce it on macos. This is related to #33590 which fixed the problem described above in WebKit but not in Firefox.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser-firefox
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@andy-fillebrown @yury-s @Skn0tt