jsPsych icon indicating copy to clipboard operation
jsPsych copied to clipboard

Audio snippet not working in Firefox

Open Dazzid opened this issue 1 year ago • 3 comments

I'm running this code, but we have seen that participants using Firefox can not play the audio samples. How can I fix this issue?

The code I'm using is this one:

var all_audio_samples = [
                  "01_Rock_F_major_model_2.mp3",
                  "02_Rock_F_major_model_2.mp3",
                  "03_Pop_F7_model_2.mp3",
                  "04_Blues_F_major_model_2.mp3",
                  "05_Blues_E_7_model_1.mp3",
                  "06_Pop_E_model_1.mp3",
                  "07_Pop_Cm7_model_1.mp3",
                  "08_Rock_C_model_1.mp3",
                  "09_Jazz_A_major_model_2.mp3",
                  "10_Rock_D_minor_model_1.mp3"
];

var question_simple = [
  "01_I_IV_V_vi.mp3",
  "02_ii_V_I_vi.mp3",
  "03_vi_ii_V_I.mp3"
  ];

var preload = {
  type: jsPsychPreload,
  audio: all_audio_samples, question_simple
};
/* 2 Harmonic question */
// it's evaluated each time this script or function is run.
var randomQuestion = question_simple[Math.floor(Math.random() * question_simple.length)];

var harmonyQuestion = {
    type: jsPsychSurveyMultiChoice,
    stimulus: `harmony`,
    questions: [
        {
            prompt: "The correct functional progression of the previous audio is:",
            options: harmonicOptions,
            required: true,
            name: 'harmonyProgression'
        }
    ],
    preamble: `<div style="margin-bottom: 20px;">Listen to the recording below and then select the correct functional progression. <br>You must listen to the entire recording before you continue:</div>
             <div class="audio-container">
             <audio id="harmonyAudio" controls>
               <source src="${randomQuestion}" type="audio/mpeg">
               Your browser does not support the audio element.
             </audio> </div>`,
    on_load: function() {
        document.querySelector('#jspsych-survey-multi-choice-next').disabled = true;
        document.getElementById('harmonyAudio').addEventListener('ended', function() {
            document.querySelector('#jspsych-survey-multi-choice-next').disabled = false;
        });
    },
    // Include the played audio file in the data to be saved
    data: {
        questionAudio: randomQuestion
    }
};


timeline.push(harmonyQuestion);

Dazzid avatar Mar 29 '24 10:03 Dazzid

Hi @Dazzid

This segment doesn't look quite right:

var preload = {
  type: jsPsychPreload,
  audio: all_audio_samples, question_simple
};

You've got two values going to the audio parameter. Try wrapping them in an array:

var preload = {
  type: jsPsychPreload,
  audio: [all_audio_samples, question_simple]
};

jodeleeuw avatar Mar 29 '24 14:03 jodeleeuw

ooou! That was the error! Thank you

Dazzid avatar Mar 29 '24 16:03 Dazzid

I have another issue. The audio in Firefox stops playing in the middle without finishing the sample. Have you seen this issue?

Dazzid avatar Mar 29 '24 16:03 Dazzid