Last Updated: February 25, 2016
·
1.726K
· 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>

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside