search

jspsych / jsPsych

Create behavioral experiments in a browser using JavaScript
http://www.jspsych.org
MIT License
1.05k stars 679 forks source link

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

Open susanBuck opened 1 month ago

susanBuck commented 1 month ago

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 commented 1 month ago

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: https://github.com/jspsych/jsPsych/blob/9c6afb874251d6dd6d1c9917986869f239a972da/packages/jspsych/src/modules/plugin-api/MediaAPI.ts#L13-L21 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 commented 1 month ago

@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 commented 1 month ago

@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.