Skip to content

Instantly share code, notes, and snippets.

@sudofox

sudofox/bluebox.html

Last active January 3, 2023 16:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sudofox/d63ff4cf12b72ddcf96d8f1f2fb80d15 to your computer and use it in GitHub Desktop.
Save sudofox/d63ff4cf12b72ddcf96d8f1f2fb80d15 to your computer and use it in GitHub Desktop.
Download ZIP
simple blue box in html/js, not thoroughly tested
Raw
bluebox.html
<html>
<head>
<script>
function playTones(frequencies) {
// Create an audio context
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// Create an oscillator for each frequency
var oscillators = frequencies.map(function(frequency) {
var oscillator = audioCtx.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.value = frequency;
oscillator.connect(audioCtx.destination);
return oscillator;
});
// Start the oscillators
oscillators.forEach(function(oscillator) {
oscillator.start();
});
// Stop the oscillators after 1 second
setTimeout(function() {
oscillators.forEach(function(oscillator) {
oscillator.stop();
});
}, 100);
}
</script>
<style>
.keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 5px;
width: 300px;
height: 400px;
border: 1px solid black;
}
.keypad button {
width: 100%;
height: 100%;
border: 1px solid black;
font-size: 24px;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
.keypad button.wide {
grid-column: 1/4;
}
</style>
</head>
<body>
<div class="keypad">
<button class="button wide" onclick="playTones([2600])">2600</button>
<button class="button" onclick="playTones([700, 900])">1</button>
<button class="button" onclick="playTones([700, 1100])">2</button>
<button class="button" onclick="playTones([900, 1100])">3</button>
<button class="button" onclick="playTones([700, 1300])">4</button>
<button class="button" onclick="playTones([900, 1300])">5</button>
<button class="button" onclick="playTones([1100, 1300])">6</button>
<button class="button" onclick="playTones([700, 1500])">7</button>
<button class="button" onclick="playTones([900, 1500])">8</button>
<button class="button" onclick="playTones([1100, 1500])">9</button>
<button class="button" onclick="playTones([1100, 1700])">KP</button>
<button class="button" onclick="playTones([1300, 1500])">0</button>
<button class="button" onclick="playTones([1500, 1700])">ST</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment