Article gUM echoCancellation noiseSuppression autoGainControlfilter

HTML

<audio id="audio" controls width="160" height="120" autoplay></audio><br>
<label><input type="checkbox" id="echo">echoCancellation</label>
<label><input type="checkbox" id="noise">noiseSuppression</label>
<label><input type="checkbox" id="gain">autoGainControl</label>
<label><input type="checkbox" id="muted">mute</label>
<div id="container"></div>
<div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

JavaScript

var track, gUM = c => navigator.mediaDevices.getUserMedia(c);
var updateSpectrum = spectrum();


(async () => {
  updateSpectrum(audio.srcObject = await gUM({audio: true}));
  track = audio.srcObject.getAudioTracks()[0];
  update();
})().catch(e => log(e));

function update() {
  let set = track.getSettings();
  echo.checked = set.echoCancellation;
  noise.checked = set.noiseSuppression;
  gain.checked = set.autoGainControl;
  muted.checked = !track.enabled;
}

echo.onclick = e => apply({echoCancellation: echo.checked});
noise.onclick = e => apply({noiseSuppression: noise.checked});
gain.onclick = e => apply({autoGainControl: gain.checked});
muted.onclick = e => { track.enabled = !muted.checked };

async function apply(c) {
	track.stop();
	const new_constraints = Object.assign(track.getSettings(), c, );
	const new_stream = await gUM({ audio: new_constraints });
  updateSpectrum( audio.srcObject = new_stream );
  track = new_stream.getAudioTracks()[0];
  update();
}

function spectrum() {
  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  var analyser = audioCtx.createAnalyser();
	var source;
  var canvas = document.createElement("canvas");
  var canvasCtx = canvas.getContext("2d");
  canvas.width = window.innerWidth/2 - 20;
  canvas.height = window.innerHeight/2 - 20;
  container.appendChild(canvas);

  var data = new Uint8Array(canvas.width);
  canvasCtx.strokeStyle = 'rgb(0, 125, 0)';

  setInterval(() => {
    canvasCtx.fillStyle = "#a0a0a0";
    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

    analyser.getByteFrequencyData(data);
    canvasCtx.lineWidth = 2;
    data.forEach((y, x) => {
      y = canvas.height - (y / 128) * canvas.height / 4;
      var c = Math.floor((x*255)/canvas.width);
      canvasCtx.fillStyle = "rgb("+c+",0,"+(255-x)+")";
      canvasCtx.fillRect(x, y, 2, canvas.height - y)
    });

    analyser.getByteTimeDomainData(data);
    canvasCtx.lineWidth = 5;
    canvasCtx.beginPath();
    data.forEach((y,...