Воспроизвести три аудио по очереди и собрать ответ javascript

Question

Я хотел бы знать, возможно ли воспроизводить три аудиофайла один за другим и чтобы участник нажимал кнопку (возможно, речевой пузырь), указывающую аудиофайл, который он хочет выбрать. Всё, пока изображение постоянно отображается внизу (или вверху, мне это безразлично).

ВАЖНО: Я бы хотел, чтобы каждый аудио + речевой пузырь появлялся вместе по одному и оставался включенным. монитор до последнего звука.

У меня есть чертеж того, что я имею в виду:

Плюс - сделать это возможным с помощью некоторого плагина jsPsych! Пожалуйста, помогите мне, ребята!

---

ОБНОВЛЕНИЕ, проблема решена! Основная идея состоит в том, чтобы отказаться от формы l oop или предоставить целые векторные идеи и указать каждый звук как независимое испытание, и объединить испытания в более крупную «задачу». Решение пришло из основной группы 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 об аудио не много, мне все же удалось найти этот пример , который зацикливает изображения до нажатия кнопки и применяет те же логики c к вашим аудиофайлам.

Я не уверен, появятся ли в нужный момент речевые пузыри, но изменение объекта в методе 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
});