Audio feedback and Noise.

Demonstration of Audio Feedback and noise.

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<h1>Audio feedback and noise demo</h1>

<p>You should hear your own voice played back with a delay mixed with noise.</p>

<p>Adjust the noise level using the slider.</p>
<p> Notice how the susceptibilty to audio feedback varies.</p>

<div id="slider"></div>

<p>Noise volume: <span id="slider-value"></span> dB</p>



<p>You may need to press the "allow" button above</p>



<a href="http://papers.traustikristjansson.info/?p=486">See the tutorial here.</a>

CSS

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}

JavaScript

// Ripples on a lake.

var noiseVolume = Math.pow(10.0, -4.0 / 20.0);  // Initial noise voluem

function myPCMFilterFunction(inputSample) {
  var noiseSample = Math.random() * 2 - 1;
  return inputSample + noiseSample * noiseVolume;  // For example, add noise samples.
}

// The rest is boilerplate.

// Check if Web Audio API is supported.
var audioContext;
try {
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
  audioContext = new AudioContext();
} catch(e) {
  alert('Web Audio API is not supported in this browser');
}

// Check if there is microphone input.``
try {
  navigator.getUserMedia = navigator.getUserMedia ||
                           navigator.webkitGetUserMedia ||
                           navigator.mozGetUserMedia ||
                           navigator.msGetUserMedia;
  var hasMicrophoneInput = (navigator.getUserMedia || navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia || navigator.msGetUserMedia);
} catch(e) {
  alert("getUserMedia() is not supported in your browser");
}

// Create a pcm processing "node" for the filter graph.
var bufferSize = 4096;
var myPCMProcessingNode = audioContext.createScriptProcessor(bufferSize, 1, 1);
myPCMProcessingNode.onaudioprocess = function(e) {
  var input = e.inputBuffer.getChannelData(0);
  var output = e.outputBuffer.getChannelData(0);
  for (var i = 0; i < bufferSize; i++) {
     // Modify the input and send it to the output.
     output[i] = myPCMFilterFunction(input[i]);
  }
}


var errorCallback = function(e) {
  alert("Error in getUserMedia: " + e);
};  

// Get access to the microphone and start pumping data through the  graph.
navigator.getUserMedia({audio: true}, function(stream) {
  // microphone -> myPCMProcessingNode -> destination.
  var microphone = audioContext.createMediaStreamSource(stream);
  microphone.connect(myPCMProcessingNode);
  myPCMProcessingNode.connect(audioContext.destination);
  //microphone.start(0);
},...