revising audio-keyboard-response to use AudioPlayer

packages/plugin-audio-keyboard-response/src/index.ts

@@ -1,3 +1,4 @@
+import autoBind from "auto-bind";
 import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
 
 const info = <const>{
@@ -61,50 +62,28 @@ type Info = typeof info;
 class AudioKeyboardResponsePlugin implements JsPsychPlugin<Info> {
   static info = info;
   private audio;
+  private params: TrialType<Info>;
+  private display: HTMLElement;
+  private response: { rt: number; key: string } = { rt: null, key: null };
+  private startTime: number;
+  private finish: ({}: { rt: number; response: string; stimulus: string }) => void;
 
-  constructor(private jsPsych: JsPsych) {}
+  constructor(private jsPsych: JsPsych) {
+    autoBind(this);
+  }
 
   trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {
-    // hold the .resolve() function from the Promise that ends the trial
+    return new Promise(async (resolve) => {
-    let trial_complete;
+      this.finish = resolve;
+      this.params = trial;
+      this.display = display_element;
 
-    // setup stimulus
+      // load audio file
-    var context = this.jsPsych.pluginAPI.audioContext();
+      this.audio = await this.jsPsych.pluginAPI.getAudioPlayer(trial.stimulus);
 
-    // store response
-    var response = {
-      rt: null,
-      key: null,
-    };
-
-    // record webaudio context start time
-    var startTime;
-
-    // load audio file
-    this.jsPsych.pluginAPI
-      .getAudioBuffer(trial.stimulus)
-      .then((buffer) => {
-        if (context !== null) {
-          this.audio = context.createBufferSource();
-          this.audio.buffer = buffer;
-          this.audio.connect(context.destination);
-        } else {
-          this.audio = buffer;
-          this.audio.currentTime = 0;
-        }
-        setupTrial();
-      })
-      .catch((err) => {
-        console.error(
-          `Failed to load audio file "${trial.stimulus}". Try checking the file path. We recommend using the preload plugin to load audio files.`
-        );
-        console.error(err);
-      });
-
-    const setupTrial = () => {
       // set up end event if trial needs it
       if (trial.trial_ends_after_audio) {
-        this.audio.addEventListener("ended", end_trial);
+        this.audio.addEventListener("ended", this.end_trial);
       }
 
       // show prompt if there is one
@@ -112,106 +91,90 @@ class AudioKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         display_element.innerHTML = trial.prompt;
       }
 
-      // start audio
+      // start playing audio here to record time
-      if (context !== null) {
+      // use this for offsetting RT measurement in
-        startTime = context.currentTime;
+      // setup_keyboard_listener
-        this.audio.start(startTime);
+      this.startTime = this.jsPsych.pluginAPI.audioContext()?.currentTime;
-      } else {
-        this.audio.play();
-      }
 
       // start keyboard listener when trial starts or sound ends
       if (trial.response_allowed_while_playing) {
-        setup_keyboard_listener();
+        this.setup_keyboard_listener();
       } else if (!trial.trial_ends_after_audio) {
-        this.audio.addEventListener("ended", setup_keyboard_listener);
+        this.audio.addEventListener("ended", this.setup_keyboard_listener);
       }
 
       // end trial if time limit is set
       if (trial.trial_duration !== null) {
         this.jsPsych.pluginAPI.setTimeout(() => {
-          end_trial();
+          this.end_trial();
         }, trial.trial_duration);
       }
 
+      // call trial on_load method because we are done with all loading setup
       on_load();
-    };
 
-    // function to end trial when it is time
+      this.audio.play();
-    const end_trial = () => {
-      // kill any remaining setTimeout handlers
-      this.jsPsych.pluginAPI.clearAllTimeouts();
-
-      // stop the audio file if it is playing
-      // remove end event listeners if they exist
-      if (context !== null) {
-        this.audio.stop();
-      } else {
-        this.audio.pause();
-      }
-
-      this.audio.removeEventListener("ended", end_trial);
-      this.audio.removeEventListener("ended", setup_keyboard_listener);
-
-      // kill keyboard listeners
-      this.jsPsych.pluginAPI.cancelAllKeyboardResponses();
-
-      // gather the data to store for the trial
-      var trial_data = {
-        rt: response.rt,
-        stimulus: trial.stimulus,
-        response: response.key,
-      };
-
-      // clear the display
-      display_element.innerHTML = "";
-
-      // move on to the next trial
-      this.jsPsych.finishTrial(trial_data);
-
-      trial_complete();
-    };
-
-    // function to handle responses by the subject
-    function after_response(info) {
-      // only record the first response
-      if (response.key == null) {
-        response = info;
-      }
-
-      if (trial.response_ends_trial) {
-        end_trial();
-      }
-    }
-
-    const setup_keyboard_listener = () => {
-      // start the response listener
-      if (context !== null) {
-        this.jsPsych.pluginAPI.getKeyboardResponse({
-          callback_function: after_response,
-          valid_responses: trial.choices,
-          rt_method: "audio",
-          persist: false,
-          allow_held_key: false,
-          audio_context: context,
-          audio_context_start_time: startTime,
-        });
-      } else {
-        this.jsPsych.pluginAPI.getKeyboardResponse({
-          callback_function: after_response,
-          valid_responses: trial.choices,
-          rt_method: "performance",
-          persist: false,
-          allow_held_key: false,
-        });
-      }
-    };
-
-    return new Promise((resolve) => {
-      trial_complete = resolve;
     });
   }
 
+  private end_trial() {
+    // kill any remaining setTimeout handlers
+    this.jsPsych.pluginAPI.clearAllTimeouts();
+
+    // stop the audio file if it is playing
+    this.audio.stop();
+
+    // remove end event listeners if they exist
+    this.audio.removeEventListener("ended", this.end_trial);
+    this.audio.removeEventListener("ended", this.setup_keyboard_listener);
+
+    // kill keyboard listeners
+    this.jsPsych.pluginAPI.cancelAllKeyboardResponses();
+
+    // gather the data to store for the trial
+    var trial_data = {
+      rt: this.response.rt,
+      response: this.response.key,
+      stimulus: this.params.stimulus,
+    };
+
+    // clear the display
+    this.display.innerHTML = "";
+
+    // move on to the next trial
+    this.finish(trial_data);
+  }
+
+  private after_response(info: { key: string; rt: number }) {
+    this.response = info;
+    if (this.params.response_ends_trial) {
+      this.end_trial();
+    }
+  }
+
+  private setup_keyboard_listener() {
+    // start the response listener
+    if (this.jsPsych.pluginAPI.useWebaudio) {
+      this.jsPsych.pluginAPI.getKeyboardResponse({
+        callback_function: this.after_response,
+        valid_responses: this.params.choices,
+        rt_method: "audio",
+        persist: false,
+        allow_held_key: false,
+        audio_context: this.jsPsych.pluginAPI.audioContext(),
+        audio_context_start_time: this.startTime,
+      });
+    } else {
+      this.jsPsych.pluginAPI.getKeyboardResponse({
+        callback_function: this.after_response,
+        valid_responses: this.params.choices,
+        rt_method: "performance",
+        persist: false,
+        allow_held_key: false,
+      });
+    }
+  }
+
   simulate(
     trial: TrialType<Info>,
     simulation_mode,