Skip to content

Instantly share code, notes, and snippets.

@meirkl

meirkl/white-noise.js

Created August 30, 2021 08:51
Show Gist options
  • Save meirkl/da585766cceacbed7e0c2b0f44cda075 to your computer and use it in GitHub Desktop.
Save meirkl/da585766cceacbed7e0c2b0f44cda075 to your computer and use it in GitHub Desktop.
Download ZIP
white noise js
Raw
white-noise.js
document.getElementById("app").innerHTML = `
<button id="white-demo">White Noise</button>
<button id="pink-demo">Pink Noise</button>
<button id="brown-demo">Brown Noise</button>
`;
(function (AudioContext) {
AudioContext.prototype.createWhiteNoise = function (bufferSize) {
bufferSize = bufferSize || 4096;
const node = this.createScriptProcessor(bufferSize, 1, 1);
node.onaudioprocess = function (e) {
const output = e.outputBuffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) {
output[i] = Math.random() * 2 - 1;
}
};
return node;
};
AudioContext.prototype.createPinkNoise = function (bufferSize) {
bufferSize = bufferSize || 4096;
let b0, b1, b2, b3, b4, b5, b6;
b0 = b1 = b2 = b3 = b4 = b5 = b6 = 0.0;
const node = this.createScriptProcessor(bufferSize, 1, 1);
node.onaudioprocess = function (e) {
const output = e.outputBuffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) {
const white = Math.random() * 2 - 1;
b0 = 0.99886 * b0 + white * 0.0555179;
b1 = 0.99332 * b1 + white * 0.0750759;
b2 = 0.969 * b2 + white * 0.153852;
b3 = 0.8665 * b3 + white * 0.3104856;
b4 = 0.55 * b4 + white * 0.5329522;
b5 = -0.7616 * b5 - white * 0.016898;
output[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362;
output[i] *= 0.11; // (roughly) compensate for gain
b6 = white * 0.115926;
}
};
return node;
};
AudioContext.prototype.createBrownNoise = function (bufferSize) {
bufferSize = bufferSize || 4096;
let lastOut = 0.0;
const node = this.createScriptProcessor(bufferSize, 1, 1);
node.onaudioprocess = function (e) {
const output = e.outputBuffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) {
const white = Math.random() * 2 - 1;
output[i] = (lastOut + 0.02 * white) / 1.02;
lastOut = output[i];
output[i] *= 3.5; // (roughly) compensate for gain
}
};
return node;
};
})(window.AudioContext || window.webkitAudioContext);
const audioContext = new (window.webkitAudioContext || window.AudioContext)();
const whiteNoise = audioContext.createWhiteNoise();
const whiteGain = audioContext.createGain();
whiteGain.gain.value = 0;
whiteNoise.connect(whiteGain);
whiteGain.connect(audioContext.destination);
const pinkNoise = audioContext.createPinkNoise();
const pinkGain = audioContext.createGain();
pinkGain.gain.value = 0;
pinkNoise.connect(pinkGain);
pinkGain.connect(audioContext.destination);
const brownNoise = audioContext.createBrownNoise();
const brownGain = audioContext.createGain();
brownGain.gain.value = 0;
brownNoise.connect(brownGain);
brownGain.connect(audioContext.destination);
const toggleDemo = (text, gain) => {
const handler = (e) => {
if (gain.gain.value === 0.0) {
e.target.innerText = "Stop";
gain.gain.value = 0.3;
} else {
e.target.innerText = text;
gain.gain.value = 0.0;
}
};
return handler;
};
const whiteDemoButton = document.getElementById("white-demo");
whiteDemoButton.addEventListener("click", toggleDemo("White Noise", whiteGain));
const pinkDemoButton = document.getElementById("pink-demo");
pinkDemoButton.addEventListener("click", toggleDemo("Pink Noise", pinkGain));
const brownDemoButton = document.getElementById("brown-demo");
brownDemoButton.addEventListener("click", toggleDemo("Brown Noise", brownGain));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment