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.

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

"AudioContext was not allowed to start" warning, but not using any audio-related plugins #3407

Open
susanBuck opened this issue Sep 30, 2024 · 3 comments

Comments

@susanBuck
Copy link
Contributor

Receiving the following warning in Google Chrome (129.0.6668.70) web inspector:

MediaAPI.ts:19 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

I understand the error occurs because browsers require interaction before allowing audio to play. However, I can recreate the issue in a barebones experiment with no audio-related plugins, just a simple html-keyboard-response.

JavaScript:

let jsPsych = initJsPsych();
let timeline = [];
let welcomeTrial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: `
    <h1>Welcome to the Lexical Decision Task!</h1>

    <p>In this experiment, you will be shown a series of characters and asked to categorize whether the characters make up a word or not.</p>
    <p>There are three parts to this experiment.</p>
    <p>Press SPACE to begin the first part.</p>
    `,
    choices: [' ']
};
timeline.push(welcomeTrial);
jsPsych.run(timeline);

HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Lexical Decision Task</title>
    <link href=data:, rel=icon>

    <link href='https://unpkg.com/jspsych/css/jspsych.css' rel='stylesheet' type='text/css'>

    <script src='https://unpkg.com/jspsych'></script>
    <script src='https://unpkg.com/@jspsych/plugin-html-keyboard-response'></script>

    <script src='experiment.js'></script>
</head>

<body></body>

</html>
@becky-gilbert
Copy link
Collaborator

Hi @susanBuck, thanks for reporting this! This is a warning rather than an error, and it's an annoying one because the jsPsych code isn't really doing anything wrong here. What's happening is that jsPsych always creates the Audio Context in case it's needed by plugins later on during the experiment. Most browsers require that the user makes some kind of interaction with the page (button cilck, key press) before the page can actually play audio, which makes sense. Unfortunately the browser is warning us that there hasn't been a user interaction at the point when we're creating the Audio Context, even though we're not actually trying to play anything!

My suggestion is to ignore this warning. If we do want to get rid of it, we could move the code that creates the Audio Context out of the constructor:

constructor(public useWebaudio: boolean) {
if (
this.useWebaudio &&
typeof window !== "undefined" &&
typeof window.AudioContext !== "undefined"
) {
this.context = new AudioContext();
}
}

And put it into any plugin API functions that require the Audio Context - these would check if it exists, and if not, create it.

Thoughts @jspsych/core?

@susanBuck
Copy link
Contributor Author

@becky-gilbert - Thanks for the info! I'm teaching a class that uses jsPsych and the students were thrown off by the warning in the console. I've told them they can ignore it and showed how to filter out warnings from the console.

@becky-gilbert
Copy link
Collaborator

@susanBuck no problem! Yep, I can see why your students would be thrown off. Ideally jsPsych would not produce unnecessary console warnings since it can confuse new users, plus it makes it harder for all users to notice any other warnings.

I don't think this is a high-priority issue for the team right now, but I'll leave this issue open until we decide whether/when to fix it. In the meantime, it's safe to just ignore this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants