Last Updated: February 25, 2016
·
1.484K
· samccone

Active Audio Removal in HTML5

Download Chrome Canary
https://tools.google.com/dlpage/chromesxs

chrome://flags -- enable mic input

put on headphone.. goto this page

shout at your computer

<script type="text/javascript">
var ctx = new window.webkitAudioContext();
var processor = ctx.createJavaScriptNode(512, 2, 1);
var url = 'http://static1.kevincennis.com/sounds/callmemaybe.mp3';
var audio = new Audio(url);
var micEnabled = false;
var songReady = false;

audio.addEventListener('canplaythrough', function() {
  micEnabled && audio.play();
  songReady = true;
});

navigator.webkitGetUserMedia({audio: true, video: false}, function(stream) {
    micEnabled = true;
    var mic = ctx.createMediaStreamSource(stream);
    var callme = ctx.createMediaElementSource(audio)
    mic.connect(processor);

    processor.connect(ctx.destination);
    callme.connect(ctx.destination);
    songReady && audio.play();
});

processor.onaudioprocess = function(evt) {
  var input = evt.inputBuffer.getChannelData(0);
  var output = evt.outputBuffer.getChannelData(0);
  for (i = 0; i < input.length; i++ ) {
    output[i] = -1 * input[i];
  }
}
</script>