Skip to content

Instantly share code, notes, and snippets.

@Arty2 Arty2/beep.html
Created May 6, 2018

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title>beep</title>
<meta charset="utf-8" />
<style>
body {
margin: 20px;
background: #0000FF;
color: #FFF;
font-size: 39px;
line-height: 38px;
word-wrap: break-word;
/*font-size: 60px;
letter-spacing: -12px;
line-height: 32px;*/
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(270deg);}
}
#canvas b:last-child {
-webkit-animation: rotation 0.2s 1 linear;
}
b {
display: inline-block;
}
</style>
</head>
<body>
<div id="canvas"></div>
<script type="text/javascript">
tiles = ['', '']; // straight lines
tiles = ['', '', '', '']; // triangles
tiles = ['', '', '', '']; // circle segments
timing = 200; // milliseconds
rows = 10;
columns = 30;
items = rows * columns;
step = 220;
notes = 1
AudioContext = (
window.AudioContext ||
window.webkitAudioContext ||
null
);
if (AudioContext) {
context = new webkitAudioContext();
} else {
// alert('browser does not support AudioContext');
}
window.onclick = function() { // mute
AudioContext = null;
}
function beep(key) {
if (!AudioContext) { return; }
var osc = context.createOscillator();
osc.connect(context.destination);
osc.type = 3; // Sine wave = 0, Square wave = 1, Sawtooth wave = 2, Triangle wave = 3
var volume = context.createGain();
osc.connect(volume);
volume.connect(context.destination);
volume.gain.setValueAtTime(notes, context.currentTime);
volume.gain.linearRampToValueAtTime(0, context.currentTime + timing / 2000)
volume.gain.linearRampToValueAtTime(notes, context.currentTime + timing / 1000)
osc.frequency.value = step + key * step; // Hz
osc.noteOn(0);
osc.noteOff(context.currentTime + timing * notes / 1000 );
}
function print(key) {
var x = count%columns;
var y = Math.floor(count/columns);
document.getElementById('canvas').innerHTML += '<b id="' + x + '-' + y
+ '" data-key="' + key
+ '" data-x="' + x
+ '" data-y="' + y
+ '">' + tiles[key] + '</b>';
if ( (count + 1)%columns == 0 ) {
document.getElementById('canvas').innerHTML += '<br/>';
}
color(key, x, y);
}
linked = [ [[-1],[-1]], [[0,3],[-1]], [[0,3],[1,0]], [[-1],[1,0]] ];
function color(key, x, y) { //optimise this function
var up_left = document.getElementById( (x-1) + '-' + (y-1) );
var up_right = document.getElementById( x + '-' + (y-1) );
var down_right = document.getElementById( x + '-' + y ); // current
var down_left = document.getElementById( (x-1) + '-' + y );
if ( down_left && linked[key][0].indexOf( down_left.dataset.key*1 ) != -1 ) {
down_right.style.color = '#000';
down_left.style.color = '#000';
}
if ( up_right && linked[key][1].indexOf( up_right.dataset.key*1 ) != -1 ) {
down_right.style.color = '#000';
up_right.style.color = '#000';
}
if ( (up_left && up_right && down_left) && up_left.dataset.key == 0 && up_right.dataset.key == 1 && down_right.dataset.key == 2 && down_left.dataset.key == 3) {
up_left.style.color = '#FF0000';
up_right.style.color = '#FF0000';
down_right.style.color = '#FF0000';
down_left.style.color = '#FF0000';
step = step/notes;
timing = timing*notes;
notes++;
}
}
count = 0;
function run() {
var key = Math.floor(Math.random() * tiles.length);
print(key);
beep(key);
if (count++ < items - 1) {
setTimeout(run, timing);
} else {
//osc.disconnect();
}
}
setTimeout(run, 2000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.