javascript - 依次播放三个音频并收集响应JavaScript

Question

我想知道是否可以一个接一个地播放三个音频文件，并让参与者单击指示他要选择的音频文件的按钮(可能是气泡)。图像始终显示在底部的所有内容(或顶部，我真的不在乎)。

重要提示:我希望每个音频+语音气泡一次出现一次并留在显示器上，直到播放完最后一个声音为止。

我有我的意思的图纸:



一个加号是使某些jsPsych插件成为可能!
请帮助我!

更新，问题解决了!
主要思想是放弃for循环，或者提供一个完整的 vector 思想，并将每个音频指定为一个独立的试验，然后将试验连接成一个更大的“任务”。
解决方案来自主要JsPsych组。

experiment: [];
    var trial1 = {
    type: 'audio-button-response',
    stimulus: 'audio1.mp3',
    choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
        trial_ends_after_audio: true,
        prompt: "<img src='stimImage.jpg'>"
};

var trial2 = {
    type: 'audio-button-response',
    stimulus: 'audio2.mp3',
    choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
        trial_ends_after_audio: true,
    prompt: "<img src='stimImage.jpg'>"
};

var trial3 = {
    type: 'audio-button-response',
    stimulus: 'audio3.mp3',
    choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
        response_ends_trial: true,
        prompt: "<img src='stimImage.jpg'>",
        on_finish: function(data) {
        jsPsych.data.addDataToLastTrial({
          key_press: data.choices
        });
      },
};


var fixation_trial = {
  type: 'html-keyboard-response',
  stimulus: '<div style="font-size:60px;">+</div>',
  choices: [69],
  trial_duration: 1000, 
  data: {
    test_part: 'fixation cross'
  },
  on_finish: function(data) {
    if (data.key_press == 69) { //press letter 'e' to skip this part
      jsPsych.endCurrentTimeline();
    }
  }
};

var task = {
  timeline: [fixation_trial, trial1, trial2, trial3]
};
experiment.push(task);
jsPsych.init({
timeline: experiment,
})

Answer 1

尽管关于音频的jsPsych的示例并不丰富，但我确实设法找到了this example，它会循环图像，直到按下按钮并为音频文件实现了相同的逻辑。

我不确定气泡是否会在正确的时刻出现，但是更改audio_trials.push()方法中的对象以将每个图像包含在每个音频文件中可能会解决该问题。

var audio = ['dep.mp3', 'dep.mp3', 'dep.mp3'];

var audio_trials = [];
for (let i = 0; i < audio.length; i++) {
  audio_trials.push({
    stimulus: audio[i]
  });
}

var audio_trial = {
  type: 'audio-button-response',
  choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
  prompt: "<p>Click on the correct speech bubble</p>",
  button_html: '<img src="%choice%" style="width: 300px"/>',
  on_finish: function(data) {
    jsPsych.data.addDataToLastTrial({
      key_press: data.choices
    });
  },
  timeline: audio_trials
};

var fixation_trial = {
  type: 'html-keyboard-response',
  stimulus: '<div style="font-size:60px;">+</div>',
  choices: [69],
  trial_duration: 1000, // here there is the random variation
  data: {
    test_part: 'fixation cross'
  },
  on_finish: function(data) {
    if (data.key_press == 69) { //press letter 'e' to skip this part
      jsPsych.endCurrentTimeline();
    }
  }
};

jsPsych.init({
  timeline: [fixation_trial, audio_trial],
  use_webaudio: true
});