Simultaneous Audio and Task

[LilianAzer]

Hello, I am looking for help and suggestions on how to add background audio simultaneously to my experiment. I would like to have the audio automatically start on a loop (if needed) and run for the full duration of the experiment. The audio is about 7 minutes long and the experiment should take about 5 minutes to complete but I have it on a loop in case participants require a longer time to complete the task. I have incorporated the following html and javascript codes but when the javascript code is in the beginning of the experiment the audio takes priority and the task will not run. When I move the javascript code after getting the subject ID then the audio will play for about a second and the experiment will take priority and the audio will stop playing. Any suggestions on how to get the task and background audio to play simultaneously?

 
<audio id="background-audio" loop autoplay> 
  <source src="sound/crowd_noise.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

<script>

  

  function waitFor(conditionFunction) {
  const poll = resolve => {
  if(conditionFunction()) resolve();
    else setTimeout(_ => poll(resolve), 400);
  }
  return new Promise(poll)
}

function getID() {
  var sid=jatos.urlQueryParameters.sid;
  if (sid == undefined) {
    sid=jatos.studySessionData['sid'];
  }
  if (typeof sid == 'undefined') {
    if (typeof jatos.workerId !== 'undefined') { // At least try the workerID
      sid = jatos.workerId;
    }
    else { sid=1234; }
  }
  return sid
}


// Background Audio 
var audio = document.getElementById('background-audio');
  if (audio) {
    audio.play().catch(error => {
      console.error('Error playing audio:', error);
    });
  } else {
    console.error('Audio element not found');
  }

  var resp_mode='button';
  if (jatos.studySessionData['resp_mode'] == 'keyboard') {
    resp_mode='keyboard';
  }
  var stim_set='1';
  if (typeof jatos.studySessionData['set_omst'] !== 'undefined') {
    stim_set = jatos.studySessionData['set_omst']
  }
  if (jatos.componentJsonInput && typeof jatos.componentJsonInput['force_set'] !== 'undefined') {
    stim_set=jatos.componentJsonInput['force_set'];
    console.log('Stim set forced via JSON component to ' + stim_set);
  }
  var trialorder='1';
  if (typeof jatos.studySessionData['trialorder'] !== 'undefined') {
    trialorder=jatos.studySessionData['trialorder'];
  }
  var run='1';
  if (typeof jatos.studySessionData['run'] !== 'undefined') {
    run=jatos.studySessionData['run'];
  }
  var twochoice=0;
  if (typeof jatos.studySessionData['twochoice'] !== 'undefined') {
    twochoice = jatos.studySessionData['twochoice']
  }
  if (jatos.componentJsonInput && typeof jatos.componentJsonInput['force_twochoice'] !== 'undefined') {
    twochoice=jatos.componentJsonInput['force_twochoice'];
    console.log('Two-choice mode forced via JSON component to ' + twochoice);
  }
  var selfpaced=1;
  if (typeof jatos.studySessionData['selfpaced'] !== 'undefined') {
    selfpaced = jatos.studySessionData['selfpaced']
  }
  var orderprefix = 'jsOrders/cMST_Imbal2_orders_';
  if (jatos.componentJsonInput && typeof jatos.componentJsonInput['force_orderprefix'] !== 'undefined') {
    orderprefix=jatos.componentJsonInput['force_orderprefix'];
    console.log('Order prefix forced via JSON component to ' + orderprefix);
  }
  var orderfile = orderprefix+stim_set+'_'+trialorder+'_'+run+'.js';

  console.log('loading ' + orderfile)
  $.getScript(orderfile,function( data, textStatus, jqxhr) {
    //console.log( data ); // Data returned
    console.log( textStatus ); // Success
    console.log( jqxhr.status ); // 200
    console.debug(orderfile + ' loaded...ish');
  });
  console.log('did the load... running await') 
modules (at start:255:3)
  await waitFor(_ => typeof trial_stim !== 'undefined');
  console.log('we are set')
  console.log(trial_stim.length)
  const preload_fnames = new Array(trial_stim.length)
  for (var i=0; i<trial_stim.length; i++) {  // Make our Set X_rs be SetX_rs
    trial_stim[i].image=baseurl+trial_stim[i].image.replace("Set ","Set");
    preload_fnames[i]=trial_stim[i].image;
  }
  
  
  // START OF CODE
  const phasename='oMSTCont';

  var jsPsych = initJsPsych({on_finish: function() {
    if (0) { jsPsych.data.displayData(); }
      else {
        var order=jatos.studySessionData["order"];
        jatos.studySessionData["taskindex"] += 1;
        var expdata = jsPsych.data.get().json();
        if (typeof order === 'undefined') {
          // We don't have an 'order' setup, so assume it's 1-N
          console.log('faking an order')
          order=Array(jatos.componentList.length).fill().map((e,i)=>i+1);
          jatos.studySessionData["taskindex"]=jatos.componentPos;
          //console.log(order);
          //console.log(jatos.studySessionData["taskindex"]);
        }
        // Submit results to JATOS and queue the end or next task
        if (typeof order === 'undefined' || order.length == jatos.studySessionData["taskindex"]) { 
          // we're done
          // Check if this came from SONA - should have URL.sid and .sona
          if (typeof jatos.urlQueryParameters.sid === 'undefined' || typeof jatos.urlQueryParameters.sona === 'undefined' ||
              typeof jatos.studyJsonInput['experiment_id'] === 'undefined' || typeof jatos.studyJsonInput['credit_token'] === 'undefined') {
            jatos.submitResultData(expdata,jatos.endStudy);
          }
    }
  });

  jsPsych.data.addProperties({
    task: phasename,
    subject: sid,
    set: stim_set,
    selfpaced: selfpaced,
    orderfile: orderfile
  });


  // Setup prompts and response options based on keyboard/button and 2/3 choices
  var instr_choice=[' ']; // 32 is space
  var instr_txt='<i>spacebar</i>';
  var trial_txt='Old (<b>v</b>), Similar (<b>b</b>), or New? (<b>n</b>)';
  var trial_choices=['v','b','n'];
  if (twochoice == 1) {
    trial_txt='Old (<b>v</b>) or New? (<b>n</b>)';
    trial_choices=['v','n'];
  }
  if (resp_mode == 'button') {
    instr_choice=['OK'];
    instr_txt='<i>OK</i>';
    if (twochoice == 1) {
      trial_txt='<i>Old</i> or <i>New</i>';
      trial_choices=['Old','New'];
    }
    else {
      trial_txt='<i>Old</i>, <i>Similar</i>, or <i>New</i>';
      trial_choices=['Old','Similar','New'];
    }
  }


  var instr1_trial = {  
    type: (resp_mode == 'button' ? jsPsychHtmlButtonResponse : jsPsychHtmlKeyboardResponse),
    choices: instr_choice,
    prompt: '<p>Press ' + instr_txt + ' to begin this next task</p>',
    margin_horizontal: '40px', margin_vertical: '20px',
//        button_html: '<button style="font-size: 150%" class="jspsych-btn">%choice%</button>',
    stimulus: '<p>Continuous ' + trial_txt + ' task</p>'
  }
  
  // Build up my actual trial timeline
  var tlv = [];
  var ntrials = trial_stim.length;
  let DEBUGMODE=0;
  if (DEBUGMODE == 1) { ntrials = 20; }
  console.log('Building up the ' + ntrials + ' trials')
  for (var i=0; i<ntrials; i++) {
    // in corr_resp: 0=old, 1=sim, 2=new
    trial_info=trial_stim[i]
    let tr_type='foil';
    let cresp='n'
    if (trial_info.correct_resp == 0) {
      tr_type = 'target';
      cresp='o';
    }
    else if (trial_info.correct_resp == 1) {
      tr_type='lure';
      if (twochoice == 1) {
        cresp='n';
      }
      else {
        cresp='s';
      }
    }
    let lure_bin=0;  // We may or may not have this in the order file
    if (trial_info.lbin && trial_info.lbin !== 'undefined') {
      lure_bin=trial_info.lbin;
    }
    // keycode 'n' (for 1 and 2) = 78, 'y' (for 0)=89
    // keycode 'n' (for 1 and 2) = 78, 'y' (for 0)=89, i=73, o=79
    //let obj={stimulus: trial_info.image, data: {condition: tr_type, correct_response: cresp, lbin:lure_bin}}
    let obj={stimulus: trial_info.image, data: {condition: tr_type, correct_response: cresp, lbin:lure_bin}}
    //console.log(i + '  bin: ' + lure_bin)
    tlv.push(obj)
  }
  //console.log(JSON.stringify(tlv))
  var test_trials = {
    timeline: [
      {
      type: (resp_mode == 'button' ? jsPsychImageButtonResponse : jsPsychImageKeyboardResponse),
      prompt: '<p>Did you see this before? Is it ' + trial_txt + '?</p>',
      choices: trial_choices,
      stimulus_duration: 2000,
      trial_duration: (selfpaced==1 ? null : 2500),
      post_trial_gap: 500,
      margin_horizontal: '40px', margin_vertical: '20px',
      stimulus: jsPsych.timelineVariable('stimulus'),
      data: jsPsych.timelineVariable('data'),
      stimulus_height: 400,
      stimulus_width: 400,
      on_finish: function(data) {
        // yes = button 0 = 'y' = keycode 89
        // no = button 1 = 'n' = keycode 78 
        // let resp = 'n';
        // if (resp_mode == 'button' && data.button_pressed == 0) { resp = 'y' }
        // if (resp_mode == 'keyboard' && data.key_press == 89 ) { resp = 'y' }
        let resp = null;
        if (resp_mode == 'button') {
            if (data.response == 0) { resp = 'o' }
            else if (data.response == 2 ) { resp = 'n' }
            else if (data.response == 1 ) { resp = (twochoice==1 ? 'n' : 's') }
        } 
        else {
            if (data.response == 'v') { resp = 'o' }
            else if (data.response == 'b' ) { resp = 's' }
            else if (data.response == 'n') { resp = 'n' }
        } 
 
        data.correct =  resp == data.correct_response;
        data.resp = resp;
      }
    }],
    timeline_variables: tlv
  }

  var preload = {
    type: jsPsychPreload,
    images: preload_fnames, 
    show_progress_bar: true,
    show_detailed_erros: true,
    continue_after_error: true,
    on_error: function(fname) {
      console.log('FAILED  '+fname)
    },
    on_finish: function(data) {
      console.log('Preload success? ' + data.success)
      console.log('Failed on ' + data.failed_images.length)
    }
  }
  
  var timeline = [preload, instr1_trial, test_trials];
  jsPsych.run(timeline);
  
      
});
</script>```

[Shaobin-Jiang]

Could you provide a complete version of your code?

[LilianAzer]

@Shaobin-Jiang I have updated the post to provide the code. Thank you!

[Shaobin-Jiang]

Hmmm... Looks to me this might be a problem related to jatos, and as I have little knowledge on that I cannot offer much help here.