130 lines
3.7 KiB
HTML
130 lines
3.7 KiB
HTML
<html>
|
|
<head>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<button id="white-demo">
|
|
White Noise
|
|
</button>
|
|
<button id="pink-demo">
|
|
Pink Noise
|
|
</button>
|
|
<button id="brown-demo">
|
|
Brown Noise
|
|
</button>
|
|
<script type="text/javascript">
|
|
(function(AudioContext) {
|
|
AudioContext.prototype.createWhiteNoise = function(bufferSize) {
|
|
bufferSize = bufferSize || 4096;
|
|
var node = this.createScriptProcessor(bufferSize, 1, 1);
|
|
node.onaudioprocess = function(e) {
|
|
var output = e.outputBuffer.getChannelData(0);
|
|
for (var i = 0; i < bufferSize; i++) {
|
|
output[i] = Math.random() * 2 - 1;
|
|
}
|
|
}
|
|
return node;
|
|
};
|
|
|
|
AudioContext.prototype.createPinkNoise = function(bufferSize) {
|
|
bufferSize = bufferSize || 4096;
|
|
var b0, b1, b2, b3, b4, b5, b6;
|
|
b0 = b1 = b2 = b3 = b4 = b5 = b6 = 0.0;
|
|
var node = this.createScriptProcessor(bufferSize, 1, 1);
|
|
node.onaudioprocess = function(e) {
|
|
var output = e.outputBuffer.getChannelData(0);
|
|
for (var i = 0; i < bufferSize; i++) {
|
|
var white = Math.random() * 2 - 1;
|
|
b0 = 0.99886 * b0 + white * 0.0555179;
|
|
b1 = 0.99332 * b1 + white * 0.0750759;
|
|
b2 = 0.96900 * b2 + white * 0.1538520;
|
|
b3 = 0.86650 * b3 + white * 0.3104856;
|
|
b4 = 0.55000 * b4 + white * 0.5329522;
|
|
b5 = -0.7616 * b5 - white * 0.0168980;
|
|
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;
|
|
var lastOut = 0.0;
|
|
var node = this.createScriptProcessor(bufferSize, 1, 1);
|
|
node.onaudioprocess = function(e) {
|
|
var output = e.outputBuffer.getChannelData(0);
|
|
for (var i = 0; i < bufferSize; i++) {
|
|
var 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);
|
|
</script>
|
|
<script type="text/javascript">
|
|
var audioContext;
|
|
var whiteNoise;
|
|
var whiteGain;
|
|
var pinkNoise;
|
|
var pinkGain;
|
|
var brownNoise;
|
|
var brownGain;
|
|
|
|
var enableAudio = function() {
|
|
audioContext = new (window.webkitAudioContext || window.AudioContext)();
|
|
|
|
whiteNoise = audioContext.createWhiteNoise();
|
|
whiteGain = audioContext.createGain();
|
|
whiteGain.gain.value = 0;
|
|
whiteNoise.connect(whiteGain);
|
|
whiteGain.connect(audioContext.destination);
|
|
|
|
pinkNoise = audioContext.createPinkNoise();
|
|
pinkGain = audioContext.createGain();
|
|
pinkGain.gain.value = 0;
|
|
pinkNoise.connect(pinkGain);
|
|
pinkGain.connect(audioContext.destination);
|
|
|
|
brownNoise = audioContext.createBrownNoise();
|
|
brownGain = audioContext.createGain();
|
|
brownGain.gain.value = 0;
|
|
brownNoise.connect(brownGain);
|
|
brownGain.connect(audioContext.destination);
|
|
};
|
|
|
|
var toggleDemo = function(text, gain) {
|
|
var handler = function(e) {
|
|
enableAudio();
|
|
if (!gain) {
|
|
if (text === "White Noise") {
|
|
gain = whiteGain;
|
|
}
|
|
if (text === "Pink Noise") {
|
|
gain = pinkGain;
|
|
}
|
|
if (text === "Brown Noise") {
|
|
gain = brownGain;
|
|
}
|
|
}
|
|
if (gain.gain.value == 0.0) {
|
|
$(e.target).text("Stop");
|
|
gain.gain.value = 0.03;
|
|
} else {
|
|
$(e.target).text(text);
|
|
gain.gain.value = 0.0;
|
|
}
|
|
};
|
|
return handler;
|
|
};
|
|
|
|
$("#white-demo").click(toggleDemo("White Noise", whiteGain));
|
|
$("#pink-demo").click(toggleDemo("Pink Noise", pinkGain));
|
|
$("#brown-demo").click(toggleDemo("Brown Noise", brownGain));
|
|
</script>
|
|
</body>
|
|
</html> |