forked from siggy/beatboxer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
scripts.js
175 lines (146 loc) · 4.56 KB
/
scripts.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
const BPM = 120;
const TICKS = 16;
const INTERVAL = 1 / (4 * BPM / (60 * 1000));
const MAX_BITS = 32;
const MAX_HEX = MAX_BITS / 4;
// sounds originated from http://808.html909.com
const sounds = [
'https://raw.githubusercontent.com/Wojonatior/beatboxer/master/sounds/bass_drum.wav',
'https://raw.githubusercontent.com/Wojonatior/beatboxer/master/sounds/snare_drum.wav',
'https://raw.githubusercontent.com/Wojonatior/beatboxer/master/sounds/low_tom.wav',
'https://raw.githubusercontent.com/Wojonatior/beatboxer/master/sounds/mid_tom.wav',
// 'sounds/hi_tom.wav',
// 'sounds/rim_shot.wav',
// 'sounds/hand_clap.wav',
// 'sounds/cowbell.wav',
// 'sounds/cymbal.wav',
// 'sounds/o_hi_hat.wav',
// 'sounds/cl_hi_hat.wav',
// 'sounds/low_conga.wav',
// 'sounds/mid_conga.wav',
// 'sounds/hi_conga.wav',
// 'sounds/claves.wav',
// 'sounds/maracas.wav',
];
const audioCtx = new(window.AudioContext || window.webkitAudioContext)();
const buffers = [];
const theGrid = document.getElementById('grid');
const sLen = sounds.length;
function binToHex(bin) {
var hex = '';
for (i = 0, len = bin.length; i < len; i += MAX_BITS) {
var tmp = parseInt(bin.substr(i,MAX_BITS), 2).toString(16);
while (tmp.length < MAX_HEX) {
tmp = '0' + tmp;
}
hex += tmp;
}
return hex;
}
function hexToBin(hex) {
var bin = '';
for (i = 0, len = hex.length; i < len; i += MAX_HEX) {
var tmp = parseInt(hex.substr(i,MAX_HEX), 16).toString(2);
while (tmp.length < MAX_BITS) {
tmp = '0' + tmp;
}
bin += tmp;
}
return bin;
}
// represent the hash as two 32-bit integers, in hex
function updateState() {
var state = '';
Array.from(beats).map(function(btn) {
state += btn.classList.contains('on') ? '1' : '0';
});
// TODO: this causes an unnecessary restore state
window.location.hash = binToHex(state);
}
function restoreState() {
var hash = window.location.hash;
hash = (hash === '') ? '0000000000000000' : hash.substr(1); // Remove the first char (#...)
hexToBin(hash).split('').map(function(el, i) {
if (parseInt(el) === 1) {
beats[i].classList.add('on');
} else {
beats[i].classList.remove('on');
}
});
}
// needed for page history
window.addEventListener('hashchange', restoreState, false);
for (var soundIndex = 0; soundIndex < sLen; ++soundIndex) {
(function (index) {
// create buffer for sound
const req = new XMLHttpRequest();
req.open('GET', sounds[index], true);
req.responseType = 'arraybuffer';
req.onload = function () {
audioCtx.decodeAudioData(
req.response,
function (buffer) {
buffers.push(buffer);
}
);
};
req.send();
})(soundIndex);
// create row for sound
const fragment = document.createDocumentFragment();
for (var t = 0; t < TICKS; ++t) {
const btn = document.createElement('button');
btn.className = 'beat';
btn.addEventListener('click', function () {
this.classList.toggle('on');
updateState();
}, false);
fragment.appendChild(btn);
}
theGrid.appendChild(fragment);
theGrid.appendChild(document.createElement('p'));
}
const beats = document.getElementsByClassName('beat');
var lastTick = TICKS - 1;
var curTick = 0;
var lastTime = new Date().getTime();
function drumLoop() {
const curTime = new Date().getTime();
if (curTime - lastTime >= INTERVAL) {
for (var i = 0; i < sLen; ++i) {
const lastBeat = beats[i * TICKS + lastTick];
const curBeat = beats[i * TICKS + curTick];
lastBeat.classList.remove('ticked');
curBeat.classList.add('ticked');
if (curBeat.classList.contains('on')) {
try {
const source = audioCtx.createBufferSource();
source.buffer = buffers[i];
source.connect(audioCtx.destination);
source.start();
} catch (e) {
console.error(e.message);
// Fallback method
new Audio(sounds[i]).play();
}
}
}
lastTick = curTick;
curTick = (curTick + 1) % TICKS;
lastTime = curTime;
}
requestAnimationFrame(drumLoop);
}
// Restore the state before we start the drum loop
restoreState();
requestAnimationFrame(drumLoop);
// adapted from https://paulbakaus.com/tutorials/html5/web-audio-on-ios/
function enableIOSAudio() {
const buffer = audioCtx.createBuffer(1, 1, 22050);
const source = audioCtx.createBufferSource();
source.buffer = buffer;
source.connect(audioCtx.destination);
source.noteOn(0);
window.removeEventListener('touchend', enableIOSAudio, false);
}
window.addEventListener('touchend', enableIOSAudio, false);