Preloading 300 audio files - experiment crashes for participants

[LangDevLab]

Hi,

I have a question about preloading audio. One of our experiments preloads about 300 audio files and presents a total of 480 audio files throughout the entire experiment. We found that the loading bar at the beginning of the experiment either goes to completion but says "the experiment fails to load" or the loading bar doesn't load at all and then it says "the experiment fails to load" for some people. While the experiment works perfectly for others. The browsers that worked most of the time were firefox and chrome (for chrome, some people said they had to refresh the experiment multiple times before it worked properly though), while microsoft edge and safari didn't seem to work for any of the participants!

I was wondering if there was another method or any suggestions on how to better preload a large amount of audio files?

Thank you!

[jodeleeuw]

There's a timeout parameter in jsPsych.init() that defaults to 60 seconds of preload time. (Docs here). You could try extending this if you are asking participants to load a lot of data.

jsPsych.init({
	...
	max_load_time: 120000 //120 seconds
})

It's weird that this is browser specific. It could be the case the Edge and Safari have a stricter limit on how many files can be preloaded into the browser cache. If you try loading it with Edge or Safari do you get any specific error messages in the console?

Is it possible to load fewer files at a time with your experiment design? For example, this discussion gives a method for loading files in chunks.

[LangDevLab]

Hello!

Thank you, I believe extending the preload time helped for a few participants!

This is the error that appears for Safari:

TypeError: onLoadCallback is not a function. (In 'onLoadCallback()', 'onLoadCallback' is an instance of Object)

var test_stimuli_dleft_nose1 = [
				{stimulus: 'shared_assets/audio/bd/stimulus015.wav', segments: "<b>ADA</b> (left) or <b>ABA</b> (right)", choices: ['leftarrow','rightarrow'], data: {blocktype: "nose", dvalue: dvalue, nvalue: nvalue, test_part: 'test', stimtype: 'db'}},


var test_stimuli_dleft_nose2 = [
				{stimulus: 'shared_assets/audio/bd/stimulus016.wav', segments: "<b>ADA</b> (left) or <b>ABA</b> (right)", choices: ['leftarrow','rightarrow'], data: {blocktype: "nose", dvalue: dvalue, nvalue: nvalue, test_part: 'test', stimtype: 'db'}},
				

var preload_dleftnose1 = {
		        type: "call-function",
		        async: true,
		        func: function (done) {
		            jsPsych.getDisplayElement().innerHTML = '<p> Loading... </p>'
		            jsPsych.pluginAPI.preloadAudioFiles(jsPsych.timelineVariable('stimulus'), function () {
		                done({ preload: "success" });
		            })
		        }
		    };

var responselog = {
		type: 'html-keyboard-response',
		stimulus: "",
		data: jsPsych.timelineVariable('data'),
		prompt: function(){return "Do you hear <p>"+jsPsych.timelineVariable('segments',true);},
		choices: jsPsych.timelineVariable('choices'),
		on_finish: function(data){
			if(data.key_press){
				data.response = jsPsych.pluginAPI.convertKeyCodeToKeyCharacter(data.key_press);
			}/*
			else{
   				return
   			}*/
		},
		trial_duration: 15000
	};

var audiopresentation = {
		type: 'audio-keyboard-response',
		data: {test_part: 'test'},
		stimulus: jsPsych.timelineVariable('stimulus'),
		prompt: "",
		choices: jsPsych.NO_KEYS,
		trial_duration: 1100
	};

var main_procedure_dleft_nose1 = {
		timeline: [
                        preload_dleft_nose1,
			fixation_nose,
			audiopresentation, // 
			responselog
		],
		timeline_variables: test_stimuli_dleft_nose1, // specific stimuli audio bank where audio is taken from
		randomize_order: true,
		sample : {
			type: 'without-replacement',
			size: blocksize
		}
	};

I tried implementing it, but I'm not entirely sure if it works with our current design - I'm not sure if the code is correct either, since I receive this error:

Uncaught TypeError: Cannot set property 'currentTime' of undefined
at Object.jsPsych.plugins.audio-keyboard-response.plugin.trial (jspsych-audio-keyboard-response.js:71)
at doTrial (jspsych.js:854)
at nextTrial (jspsych.js:822)
at Object.window.jsPsych.core.finishTrial (jspsych.js:267)
at end_trial (jspsych-image-keyboard-response.js:134)
at jspsych-image-keyboard-response.js:175

[jodeleeuw]

Try this:

 jsPsych.pluginAPI.preloadAudioFiles(jsPsych.timelineVariable('stimulus', true), function () {
		                done({ preload: "success" });
		            })

When you use a timelineVariable inside a function, you need to set the second argument to true. (docs here)

[LangDevLab]

Thank you -- I tried implementing this, however, the experiment gets stuck at the "Loading.." screen and I receive these errors in the console:

I'm not sure if this is an issue regarding which audio is specified to be preloaded?

[becky-gilbert]

I think maybe the audio preload function expects an array, even if it's just one file. What happens if you put the stimulus from the timeline variables inside square brackets? Becky

[becky-gilbert]

Sorry, I meant adding square brackets around your audio file(s) in the preload function, like this:

jsPsych.pluginAPI.preloadAudioFiles([jsPsych.timelineVariable('stimulus', true)], function () {
    done({ preload: "success" });
})

The reason I'm suggesting this is that the docs for the preloadAudioFiles function say that the first argument should be an array, whereas your stimulus variable is a string. Also, I can see from your console errors that jsPsych is trying to load a set of files, where each file is a letter from your stimulus path ('s, 'h', 'a', etc.). This suggests to me that you've given the preload function a string, and the function is trying to treat that string as an array, so you end up with an array of individual characters.