Audio recording (html-audio-response) fails with latest Chrome browsers on Android

[jkauramaki]

I'm struggling with a nasty issue with latest (127.x) Android Chrome versions, but so far I've not managed to produce a short code snippet to isolate the issue.

Basically I want to record singing data with echo cancellation turned off , forcefully by editing plugin-initialize-microphone.js:

... const stream = yield navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: false, deviceId: mic_id } }); ...

Reason for this echo cancellation issue is that we ask the subjects to repeat the sung tones given by examples; if the subjects produce the sound in high fidelity (close to original in pitch and style) this will mess up the recording as the echo cancellation algorithm kicks in, thinking that feedback has occurred, and attenuates the recorded sample very strongly. This method has worked nicely for some time in our internal testing, the base jsPsych version being from 7.1.2 (and not being upgraded much). However, with Chrome versions 123.x and later this fails, from the reports at least Chrome 123.0.6312.100 was already faulty, but slightly older Chrome-based Edge browser on Android (123.0.2420.74) still worked. Desktop Chrome works just fine, the issue is limited to mobile versions, which are the ones the testing is currently being done.

Now, from a good and long debugging session this seems to be related mediarecorder hooks to start/stop event handlers: the mobile browser does not trigger those the same way as desktop Chrome. I managed to start the audio recording even with mobile Chrome with start/pause/resume trick (modifying plugin-html-audio-response.js to have this.recorder.start(); this.recorder.pause(); this.recorder.resume();) but this results in zero-size blob, plus the subsequent trial triggering http error ERR_REQUEST_RANGE_NOT_SATISFIABLE when accessing the audio blob.

I tried some simpler code examples (from jsPsych site, both 7.x and 8.x examples and e.g. here) , but for these the mediarecorder worked like it should, both on mobile and desktop Chrome, with or without echo cancellation.

The basic logic in the code is very close to the jsPsych examples: basically prompt for microphone selection, do a simple fixed-length recording trial, followed by a trial that plays back the previous recording. The Chrome on Android now freezes during the jsPsychHtmlAudioResponse recording trial, and does not finish at all. Even the simplest possible trial (within larger experiment code) freezes the whole jsPsych experiment (which also has tens of preloaded audio files etc.)

  var record = {
    type: jsPsychHtmlAudioResponse,
    stimulus: `<p>Recording...</p>`,
    recording_duration: 1500,
    save_audio_url: true
  };

Then again, an identical trial isolated on their own works fine. Plus, the code works fine if the echoCancellation is turned on (default in mobile browsers).

Does anybody have some clues on what could be done? From the type of bug this sound somewhat related to #1445 and AudioContext/autoplay issues/features but currently I'm a bit lost on what would be best way to deal with this if it's some functionality deep in Chrome. Having the defaults (echoCancellation on) or switching browsers completely (to Firefox) are not possible due to audio quality issues. The only thing I can think of now is forcefully downgrading Chrome, but this would not work in the long run / larger planned data collections.