Recording and collecting audio samples

This page describes the configuration you need to set up to record and collect audio samples with your IBEX project. Once you have set up your configuration, use the voiceRecorder element to let your participants record audio samples.

Recording audio requires access to your participants’ recording devices. For security concerns, as of June 2019, some browsers only grant access to the recording device if the experiment is run on a secure domain. As of June 2019, the domain on which the original Ibex Farm is hosted did not have the credentials to identify it as secured. The domain expt.pcibex.net is secure.

Sever setup

Please note that neither the PCIbex Farm nor the original Ibex Farm provide hosting for collected audio recordings. You need to have access to a server where you can upload and execute a PHP file, and which will authorize the PHP file to upload ZIP files to a subfolder. Free web hosting services such as Dropbox or Google drive typically do NOT offer that option. Web hosting solutions that you access via FTP/SSH (e.g., Dreamhost) would typically do the job.

  1. On your server, create a new folder dedicated to audio recording collection
  2. In that folder, create a subfolder named uploads (all lower-case, note the s at the end)
  3. Make sure that ‘owner’ has permission to write the uploads subfolder (the first digit of the numeric value/chmod should be 6 or 7, e.g. 750)
  4. In the main folder (i.e., NOT in uploads) upload a PHP file containing the following code:

<?php
// via: https://github.com/muaz-khan/RecordRTC/blob/master/RecordRTC-to-PHP/save.php
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header('Access-Control-Allow-Headers: X-Requested-With, content-type, access-control-allow-methods');
// Comment out the line below right after data collection
header("Access-Control-Allow-Origin: https://expt.pcibex.net");
function selfInvoker()
{
    if (!isset($_POST['fileName'])) {
        echo 'PermissionDeniedError';
        return;
    }

    $fileName = '';
    $tempName = '';

    if (isset($_POST['fileName'])) {
        $fileName = $_POST['fileName'];
        $tempName = $_FILES['file']['tmp_name'];
    }

    if (empty($fileName) || empty($tempName)) {
        echo 'PermissionDeniedError';
        return;
    }
    $filePath = 'uploads/' . $fileName;

    // make sure that one can upload only allowed zip files
    $allowed = array(
        'zip'
    );
    $extension = pathinfo($filePath, PATHINFO_EXTENSION);
    if (!$extension || empty($extension) || !in_array($extension, $allowed)) {
        echo 'PermissionDeniedError';
        continue;
    }

    if (!move_uploaded_file($tempName, $filePath)) {
        echo ('Problem saving file.');
        return;
    }

    echo ($filePath);
}
selfInvoker();
?>

Note: if your experiment is not hosted on the PCIbex Farm, modify the domain in the fourth line (https://expt.pcibex.net) accordingly. You can also replace it with * and the PHP script will accept upload requests from any domain, but this might not be the best idea. Read more about CORS permissions here. It is a good idea to either comment out the line or remove the PHP file from the server altogether after data collection to prevent any malicious attempt to externally upload files on your server.

For maximal security, remove the PHP file from your server as soon as your are done collecting audio recordings.

Project setup

You need to tell your experiment where to upload the recordings before any VoiceRecorder command gets evaluated. To this end, you should create a trial using the command PennController.InitiateRecorder. Make sure that the trial is run before any trial using a VoiceRecorder element (use the .label command if needed). This is pretty simple in practice:

// Indicate where to look for the PHP file you uploaded on you server
PennController.InitiateRecorder("https://my.server/myExperiment/myFile.php");

PennController(
  newText("instructions", "Please record a sample and proceed.")
      .print()
  ,
  newVoiceRecorder("recorder")
      .print()
  ,
  newButton("continue", "Click here to continue")
      .print()
      .wait()
);