How can I get rid of this error? (update_loading_progress_bar)

[EceKayaMPI]

jspsych.js:2559 Uncaught TypeError: Cannot read property 'style' of null
at update_loading_progress_bar (jspsych.js:2559)
at Audio. (jspsych.js:2334)

Is this error important and how can I get rid of it?

Thanks,
Ece

[becky-gilbert]

Hi @EceKayaMPI! We are aware of this bug (issue #648). It doesn't cause any problems, so you can safely ignore it, and we'll get it fixed in the next release 👍

[EceKayaMPI]

Alright. Thanks.
Can I comment out some lines somewhere and avoid getting it on the console? I have too much short audio files, filling up the console with this error which makes debugging a bit tricky.

[becky-gilbert]

Sure. The fix is in this pull request. You'd need to modify the jspsych.js file, in the function called load_audio_file_html5audio. First, give a name to the 'canplaythrough' event handler:

audio.addEventListener('canplaythrough', function handleCanPlayThrough(){

And then at the end of this function, remove the event handler:

audio.removeEventListener('canplaythrough', handleCanPlayThrough);

[kurokida]

Hi @becky-gilbert , I believe this problem still exists.
Although I am using the latest jspsych.js, I'm facing this problem.

This is a sample page.
https://www.hes.kyushu-u.ac.jp/~bunshin/test/music.html

Here is the code:

const stimuli = [`audio/1.mp3`, `audio/2.mp3`, `audio/3.mp3`]
const experiment = [];

const end_message = {
    type: 'html-keyboard-response',
    choices: ['space'],
    stimulus: `Press the space key.`,
};
experiment.push(end_message);


jsPsych.init({
    timeline: experiment,
    preload_audio: stimuli,
    use_webaudio: false,
    on_finish: function(){
    }
});

I face this problem sometimes, not every time.

[becky-gilbert]

Hi @kurokida, thanks for letting me know. I tried your link and was able to see the console errors the first time the page loaded, and I could see that you're using the updated version of jspsych.js that was supposed to fix this problem. I reloaded the page a few times and didn't get the console errors again. I'll look into this and see if I can figure out why it's still happening.
Are you noticing any other problems with the audio loading/playing when you get this error?

[kurokida]

Thank you for your reply.

I've seen very rarely the error: 'The experiment failed to load'.

In the other case, the program appeared to have started the experiment before preloading the audio files. As a result, the error message ' Cannot read property 'style' of null at update_loading_progress_bar' was shown during the experiment.

[kurokida]

@becky-gilbert , I am trying to fix the issue.
I haven't solved the problem yet, but I'll share the information I got.

Please see two attachment files: one is the chrome console window; the other is the jspsych.js used with which the program ran.

jspsych20201126.txt
From these files, you can see that the canplaythrough event has been called many times.

In other words, this event has been called more than the number of audio files.
It is possible that the times this event called can't be used as the number of times the load has ended.

[kurokida]

@becky-gilbert , I may have found the cause.

The stalled event was called many times.
As a result, the canplaythrough event listener was generated many times.

Perhaps this program works properly.

Here is the code I modified.
I changed the position where the handleCanPlayThrough function is declared, and called audio.removeEventListener('canplaythrough', handleCanPlayThrough) in each event.
I can send a pull request if needed.

function load_audio_file_html5audio(source, count){
      count = count || 1;
      var audio = new Audio();
      function handleCanPlayThrough(){
        console.log(`html5audio: ${source} loaded.`)
        console.log(n_loaded)
        
        audio_buffers[source] = audio;
        n_loaded++;
        loadfn(n_loaded);
        if(n_loaded == files.length){
          finishfn();
        }
        audio.removeEventListener('canplaythrough', handleCanPlayThrough);
      }

      audio.addEventListener('canplaythrough', handleCanPlayThrough);
      audio.addEventListener('error', function handleError(){
        console.log('error')
        audio.removeEventListener('canplaythrough', handleCanPlayThrough);
        if(count < jsPsych.initSettings().max_preload_attempts){
          setTimeout(function(){
            load_audio_file_html5audio(source, count+1)
          }, 200);
        } else {
          jsPsych.loadFail();
        }
        audio.removeEventListener('error', handleError);
      });
      audio.addEventListener('stalled', function handleStalled(){
        audio.removeEventListener('canplaythrough', handleCanPlayThrough);
        console.log('stalled')
        if(count < jsPsych.initSettings().max_preload_attempts){
          setTimeout(function(){
            load_audio_file_html5audio(source, count+1)
          }, 200);
        } else {
          jsPsych.loadFail();
        }
        audio.removeEventListener('stalled', handleStalled);
      });
      audio.addEventListener('abort', function handleAbort(){
        console.log('abort')
        audio.removeEventListener('canplaythrough', handleCanPlayThrough);
        if(count < jsPsych.initSettings().max_preload_attempts){
          setTimeout(function(){
            load_audio_file_html5audio(source, count+1)
          }, 200);
        } else {
          jsPsych.loadFail();
        }
        audio.removeEventListener('abort', handleAbort);
      });
      audio.src = source;
    }

[becky-gilbert]

@kurokida thanks so much for getting to the bottom of this issue - it's incredibly helpful! Yes it would be great if you could put this change into a pull request. But if you won't have a chance to do that soon, just let me know and I can make the changes myself.

Thanks again! 😃

[EceKayaMPI]

Dear @becky-gilbert and other experts,
I started programming a new module where I wish to use the audio looped. I modified the audio-slider response plugin and added these .loop = true lines:

    // setup stimulus
    var context = jsPsych.pluginAPI.audioContext();
    if(context !== null){
      var source = context.createBufferSource();
      source.buffer = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
      source.connect(context.destination);
			source.loop = true;
    } else {
			var audio = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
			audio.currentTime = 0;
			audio.loop = true;
}

When I use the old jspsych.js (where this bug remains), I get the error,

jspsych.js:2559 Uncaught TypeError: Cannot read property 'style' of null
at update_loading_progress_bar (jspsych.js:2559)
at Audio. (jspsych.js:2334)

every time the audio loop ends. It pauses for a long while before starting the next loop, which is a problem for the experiment.

When I upgrade to the newer version, same thing happens without any error appearing on the console. How do you think I can solve this? I tried switching to web audio, but it doesn't seem to solve it.

[becky-gilbert]

Hi @EceKayaMPI, would you mind putting this question in a new thread please? I know you're getting the same error as discussed in this thread, but I think the error isn't the main issue here, and your question is more about how to get the audio to loop. Thank you!