iOS Safari: audio only recording noise

I'm developing an application that allows voice recording in the web browser. This is working fine on most browsers but I have some issues with iOS Safari. Below you can find an extract of the code, it is not complete but it gives an idea of what's going on.


//Triggered when the user clicks on a button that start the recording
function startRecording() {
  //Create new audio context
  let audioContext = new (window.AudioContext || window.webkitAudioContext);
  //Hack polyfill media recorder to re-use the audioContex
  window.NewMediaRecorder.changeAudioContext(audioContext);

  navigator.mediaDevices.enumerateDevices().then(function (devices) {
  console.log('loaded audio devices');

  console.log(devices);

  devices = devices.filter((d) => d.kind === 'audioinput');
  console.log(devices);

  console.log('chosen device: ' + devices[0].deviceId);

  navigator.mediaDevices.getUserMedia({
  audio: {
  deviceId : {
  exact : devices[0].deviceId
  }
  }
  }).then(function (stream) {
  console.log(stream);

  let recorder = new NewMediaRecorder(stream);
  recorder.addEventListener('dataavailable', function (e) {
  document.getElementById('ctrlAudio').src = URL.createObjectURL(e.data);
  });
  recorder.start();
  console.log('stop listening after 15 seconds');
  setTimeout(function () {
  console.log('15 seconds passed');
  console.log("Force stop listening");
  recorder.stop();
  recorder.stream.getTracks()[0].stop();
  }, 15000);
  });
  });
}


For the record, I'm using audio recorder polyfill (https://ai.github.io/audio-recorder-polyfill/) in order to achieve recording, as MediaRecorder is not yet available on Safari.

The recorder works fine on all navigators (this including OS X Safari), yet on iOS Safari it only records noice. If I set the volume of my speakers at maximal level I can hear myself speak, but it is from "very far away".

All the online dictaphones/recorders that I found have the same issue, they always recording noise. (Tested with an iPhone 5S, 5SE and X, all up to date).


As required, the AudioContext is created on a user event (in this case a touch on a button), I even made a dirty hack to achieve this with polyfill.

I even tried to change the gain of but that didn't help. Trying to access the audio without setting a media device isn't helping.


navigator.mediaDevices.getUserMedia({audio: true})


I think there is an issue with the media-stream, when hooking it up to HarkJs, no detection is made that a user is talking.