jsPsych
jsPsych copied to clipboard
Audio snippet not working in Firefox
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);
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]
};
ooou! That was the error! Thank you
I have another issue. The audio in Firefox stops playing in the middle without finishing the sample. Have you seen this issue?