Save participant speech recordings to Pavlovia (coded in jsPsych)

Online experiments jsPsych
1

Hello,

I have an experiment coded in jsPsych, where participants describe videos and their speech is recorded. In the past I had the experiment hosted on my institution’s server, and would send both trial data (json) and audio recordings (wav) to be stored on the server in real time.

I am now trying to switch over to hosting on Pavlovia. The experiment displays well and trial data is recorded to the csv data file, but I don’t know how to make the audio recordings get saved back to Pavlovia as well. On my institution’s server I had something like this set up:

function sendWAVData( blob, participant, filename ) {
    $.ajax(
      {
      url: '../recorder/upload.php', 
      type: "POST",
      data: blob,
      contentType:  "audio/mp3",
      headers:  {
          "experiment": getExperiment(),
          "participant":  participant,
          "filename": filename
          },
      processData:  false,
      success: function(data, textStatus, jqXHR){
        console.log("success");
        },
      error: function(jqXHR, textStatus, errorThrown){
        console.log("ajax error");
        console.log(textStatus)
        console.log(errorThrown);
        },
      }
    );
   }

With the PHP file looking like this:

<?php

// pull the raw binary data from the POST array
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
// decode it
$decodedData = base64_decode($data);
// print out the raw data, 
//echo ($decodedData);
$subject = $_POST['subjectID']; 
$filename = $_POST['fname'];

// write data to mp3 file
$fp = fopen('../../data/recordings/'.$subject.'/'.$filename, 'wb');
fwrite($fp, $decodedData);
fclose($fp);
?>

But when I try editing directories to save the audio back on Pavlovia instead, I get various errors related to Cross-Origin Resource Sharing (CORS), which I expected I would run into.

My recording script is a mix that was put together haphazardly when COVID started, but for reference my question similarly applies to this recording plugin from the jsPsych developers: html-audio-response - jsPsych

var trial = {
    type: jsPsychHtmlAudioResponse,
    stimulus: `
        <p>Please sing the first few seconds of a song and click the button when you are done.</p>
    `,
    recording_duration: 15000,
    allow_playback: true,
    on_finish: function(data){
        fetch('/save-my-data.php', { audio_base64: data.response })
            .then((audio_id){
                data.response = audio_id;
            });
    }
};

And they add:

This example assumes that there is a script on your experiment server that accepts the data called save-my-data.php

So to rephrase my question: how can I make Pavlovia “accept” the audio wav files (trial by trial) and store them, so that they’d be downloaded together with the csv data file?

Any leads would be helpful, thank you!

2

Did you solve this problem?