Audio feedback and Noise.

Demonstration of Audio Feedback and noise.

by Kelvin Russell

HTML

<script src="https://code.jquery.com/jquery-1.5.2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<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(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 =input;
}


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);
}, errorCallback);


$("#slider").slider(
{
  value:-4,
  min: -30,
  max: 0,
  step: 2,
  slide: function( event, ui ) {
    $( "#slider-value" ).html( ui.value );
    noiseVolume = Math.pow(10.0, ui.value / 20.0);
 ...