Playing with starship noise

This commit is contained in:
Neale Pickett 2018-11-21 19:19:47 +00:00
parent 5c7fbee11b
commit df5de42f9c
7 changed files with 146 additions and 71 deletions

7
404.md
View File

@ -3,8 +3,7 @@ title: 404 Not Found
permalink: /404.html permalink: /404.html
--- ---
These pages have recently been rearranged, Let's see if we can't get you what you were looking for.
but let's see if we can't get you what you were looking for.
Software Software
-------- --------
@ -17,9 +16,9 @@ Something Else
------------ ------------
Please [email me](mailto:neale@woozle.org) and I'll help you find it! Please [email me](mailto:neale@woozle.org) and I'll help you find it!
Be sure to let me know what it is you're trying to locate.
If you have the original URL of the thing, If you have the original URL of the thing,
that's very helpful. that's very helpful.
But if you don't, it's okay, But if you don't, it's okay,
just tell me as much detail as you can about what you're looking for. just tell me as much detail as you can about what you're trying to find.

View File

@ -36,7 +36,6 @@
<nav class="right"> <nav class="right">
<ul> <ul>
<li><a href="https://github.com/nealey/">GitHub</a></li> <li><a href="https://github.com/nealey/">GitHub</a></li>
<li><a href="https://google.com/+NealePickett/">Google+</a></li>
<li><a href="mailto:neale@woozle.org">Email</a></li> <li><a href="mailto:neale@woozle.org">Email</a></li>
</nav> </nav>
</footer> </footer>

View File

@ -5,7 +5,7 @@ title: Toys
Here is some various junk I've done. Maybe you'll find it amusing. Here is some various junk I've done. Maybe you'll find it amusing.
Maybe you'll just wonder why I spend so much time on this garbage. Maybe you'll just wonder why I spend so much time on this garbage.
* [Starship Noise Generator](starship.html) * [Starship Noise Generator](starship/)
* If you need to write someone a letter but really don't want to, try my * If you need to write someone a letter but really don't want to, try my
[social letter generator](letter.html) [social letter generator](letter.html)
* [Crunt](crunt.html) * [Crunt](crunt.html)

View File

@ -1,65 +0,0 @@
---
title: Starship Noise Generator
---
<div>
<input id="fader" type="range" min="0" max="10" step="0.01"> Gain
</div>
I work in a building with no HVAC,
which means we can hear *everything* people are saying,
anywhere in the building.
This page is a low-CPU noise generator that runs entirely in JavaScript.
Once it starts,
you don't need an Internet connection to keep it going.
You can leave it running forever, if you like.
For those interested,
it uses the new (in 2017) and seriously powerful
[Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API).
<script>
function whiteNoise(audioCtx) {
var bufferSize = 17 * audioCtx.sampleRate,
noiseBuffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate),
output = noiseBuffer.getChannelData(0);
for (var i = 0; i < bufferSize; i++) {
output[i] = Math.random() * 2 - 1;
}
var whiteNoise = audioCtx.createBufferSource();
whiteNoise.buffer = noiseBuffer;
whiteNoise.loop = true;
whiteNoise.start(0);
return whiteNoise;
}
function bandpassFilter(audioCtx, freq, gain) {
var filt = audioCtx.createBiquadFilter();
filt.type = "bandpass";
filt.frequency.value = freq;
filt.gain.value = gain;
return filt;
}
function boop() {
var audioCtx = new window.AudioContext();
var synth = whiteNoise(audioCtx);
var filterA = bandpassFilter(audioCtx, 100, 20);
var filterB = bandpassFilter(audioCtx, 50, 20);
var gainA = audioCtx.createGain();
whiteNoise(audioCtx).connect(filterA);
filterA.connect(filterB);
filterB.connect(gainA);
gainA.connect(audioCtx.destination);
function setFade() {
var faderPos = document.querySelector("#fader").value;
gainA.gain.value = faderPos;
}
setFade();
document.querySelector("#fader").addEventListener("input", setFade);
}
window.addEventListener("load", boop);
</script>

16
toys/starship/icon.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 13 KiB

111
toys/starship/index.html Normal file
View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic">
<link rel="stylesheet" media="screen" href="/assets/css/default.css">
<link rel="icon" href="icon.svg">
<link rel="manifest" href="manifest.webmanifest">
<style>
#play {
padding: 0;
border: 0;
margin: 1em;
font-size: 2em;
background: inherit;
}
</style>
<title>Starship Noise Generator</title>
<script>
function whiteNoise(audioCtx) {
var bufferSize = 17 * audioCtx.sampleRate,
noiseBuffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate),
output = noiseBuffer.getChannelData(0);
for (var i = 0; i < bufferSize; i++) {
output[i] = Math.random() * 2 - 1;
}
var whiteNoise = audioCtx.createBufferSource();
whiteNoise.buffer = noiseBuffer;
whiteNoise.loop = true;
whiteNoise.start(0);
return whiteNoise;
}
function bandpassFilter(audioCtx, freq, gain) {
var filt = audioCtx.createBiquadFilter();
filt.type = "bandpass";
filt.frequency.value = freq;
filt.gain.value = gain;
return filt;
}
function init() {
var audioCtx = new window.AudioContext();
var synth = whiteNoise(audioCtx);
var filterA = bandpassFilter(audioCtx, 100, 20);
var filterB = bandpassFilter(audioCtx, 50, 20);
var gainA = audioCtx.createGain();
whiteNoise(audioCtx).connect(filterA);
filterA.connect(filterB);
filterB.connect(gainA);
gainA.connect(audioCtx.destination);
audioCtx.suspend();
function setFade() {
var faderPos = document.querySelector("#fader").value;
gainA.gain.value = faderPos;
}
document.querySelector("#fader").addEventListener("input", setFade);
setFade();
document.querySelector("#play").addEventListener("click", e => {
console.log(audioCtx.state);
if (audioCtx.state == 'running') {
audioCtx.suspend();
} else {
audioCtx.resume();
}
});
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
</script>
</head>
<body>
<h1 id="title">
<span>Starship Noise Generator</span>
</h1>
<main id="content">
<div>
<button id="play">⏯️</button>
🔉
<input id="fader" type="range" min="0" max="10" step="0.01" />
🔊
</div>
<p>I work in a building with no HVAC,
which means we can hear <em>everything</em> people are saying,
anywhere in the building.</p>
<p>This page is a low-CPU noise generator that runs entirely in JavaScript.
Once it starts,
you dont need an Internet connection to keep it going.
You can leave it running forever, if you like.</p>
<p>For those interested,
it uses the new (in 2017) and seriously perfect for this application
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>.</p>
</main>
</body>
</html>

View File

@ -0,0 +1,15 @@
{
"name": "Starship Noise Generator",
"short_name": "Starship",
"start_url": ".",
"display": "standalone",
"background_color": "#fff",
"description": "Generates brown noise similar to a futuristic starship engine (or a modern HVAC system)",
"icons": [
{
"src": "icon.svg",
"sizes": "any"
}
]
}