How to keep visual stimuli on the screen while audio is played in PsychoJS?


Adding audio components online and playing them dramatically has not been an easy task in my experiment. Thanks to @wakecarter’s post here, I’ve made small progress.

Like what’s been described in the post, I added multiple audio components in an earlier routine, force end that routine so not to play audios until I need them to be played. And then I use .play() when I actually play them.

The issue I currently have is that the window would flip and display the default background while the audio is being played, and it would flip back to what’s actually supposed to be on the screen afterwards. The way I want it to be is that the visual stimulus remains on the screen while the audio is being played.

I made it work in PsychoPy is via the snippets below:
while mySound.status == STARTED:

The “clearBuffer=False” would keep the contents on the screen while audio is played.
However, I wasn’t able to find an alternative of clearBuffer=False in JS, and I know that win.flip() is not recommended. I get stuck here.

I appreciate any idea on how to achieve this.


If you are using Builder (which is recommended for online experiments so you can use the auto translation) then you should not be using win.flip.

You could start the sound playing at the beginning of the routine or the end of the previous routine. Then just present a visual stimulus for the duration you want (or until a response).

Best wishes,


Sound components are created in Builder, but they need to be played not in the routine where they are created, but later.

Image components are (and seems to need to be) created and drawn with codes, since there are a bunch of different images that need to be displayed.

Does this make things trickier?


Use AutoDraw to hide/display the images.

1 Like