Loading external stimuli (images and sound) in an OSWeb experiment

sebastiaan

Hi everyone,

At the time of writing, OSWeb 1.3.13 does not provide a convenient way to load stimuli (images or sounds) from a URL. This is inconvenient when running experiments that require a large number of stimuli, in which case including all stimuli in the file pool is impractical. (We recommend keeping the size of the .osexp file below 10 Mb for online studies.)

For now, the script below can serve as a workaround. It defines two functions addExternalImageToPool() and addExternalSoundToPool() which both take a url and a name as arguments. The url is a link to the stimulus file. The name is the name under which the stimulus is added to the file pool.

There are two crucial caveats to this approach:

• The server on which the stimuli are hosted must allow cross-origin resource sharing (CORS). This means that the server allows its files to be read by scripts that were hosted by other servers. Most servers do not allow this, in which case you get an error message that refers to the CORS policy. This error message silently appears in the browser console, and the stimulus will simply not be shown. Conveniently, raw.githubusercontent.com does allow this, and therefore I used these links in the example below.
• The stimuli require a short period to be loaded. This occurs in the background. If you try to use the stimuli before they are loaded, they are not presented (no error message seems to be generated for this).

Hopefully this is useful!

— Sebastiaan

function addExternalImageToPool(url, name) {
    const img = new Image()
    img.crossOrigin = "anonymous"
    img.src = url
    const item = {
        data: img,
        type: "image",
        name: name
    }
    runner._pool.add(item)
}

function addExternalSoundToPool(url, name) {
    const snd = new Audio()
    snd.crossOrigin = "anonymous"
    snd.src = url
    const item = {
        data: snd,
        type: "sound",
        name: name
    }
    runner._pool.add(item)
}

addExternalImageToPool(
    "https://raw.githubusercontent.com/open-cogsci/OpenSesame/loewenfeld/opensesame_plugins/joystick/joystick.png",
    "joystick.png"
)

addExternalSoundToPool(
    "https://raw.githubusercontent.com/open-cogsci/OpenSesame/loewenfeld/opensesame_resources/sounds/sonar.ogg",
    "bark.ogg"
)

Ping @eduard @lvanderlinden @Daniel

Fab

Hi @sebastiaan ,

Thanks for this! Interesting method! And inspiring too!

I was wondering whether it might actually be modified to solve the current lack of option to populate loops from a file...

I had worked out a way of dealing with this limitation (see here) but it can be fairly heavy and cumbersome. Reading your post, I wondered whether something similar might possibly be used to read a csv directly from a URL and then populate an array based on its content. I came across this post that refers to the use of "new XMLHttpRequest()" to read a csv file. I'm not experienced enough to solve it yet, but I was curious to know whether you think that in principle it may be possible or knew of some coding that might be useful to achieve this.

Any opinion or hint would be much appreciated.

All the best,

Fabrice.

Ping @eduard @lvanderlinden @Daniel

eduard

Hi Fab,

Just to give you some response, I simply have no idea :)

What you say seems to make sense, but I have no clue whether it actually does, nor can I help you finding out.

Good luck in any case and post your solution in case you find one.

Eduard

ps. thanks for being so active here! It really helps a lot.

Fab

Hi @eduard,

Thanks for your reply!

I too think it might be possible, but I have no clue how at the moment. Perhaps I'll look into it at some point (though it'd be great to see that feature implemented in a future update of OSWeb; that and possibility of playing video files and use something like the forms to collect text responses). If I find a solution, I'll post it on the forum.

Best,

Fabrice.

PS: you're welcome; I started trying to solve other people's queries as a way to learn OS myself. Have been working E-Prime for many years, which I'm happy with in the lab, but I found Eprime-Go unpractical for online testing, so finally decided to look into something else. I think OS and OSWeb are fantastic tools, and free to use, which is great.

sebastiaan

Hi @Fab and @eduard ,

Thanks for thinking along! There are two more-or-less separate things here.

The first is the option to use a file as a source for a loop table. This is something that I'd definitely like to implement, but since this source file would usually be part of the file pool it's not directly related to the ability to read external files (i.e. that are not in the file pool).

The second is the option to allow arbitrary URLs as the source for images, sound files, and files that are used as sources for the loop table. For this, some variation of the hack described in this post should probably be implemented in OSWeb.

It's on the radar!

— Sebastiaan

Fab

Thanks @sebastiaan ! That sounds very exciting!

I agree, these are two separate issues. My guess is that many users would make use of such functions.

Look forward to seeing it implemented at some point in the future 👍️

Thanks for your and the team's hard work on OS and OSWeb!

Fabrice.