audiokeys
Version:
A utility for creating QWERTY keyboards with support for different monophonic and polyphonic behaviors.
105 lines (86 loc) • 3.1 kB
HTML
<html>
<head>
<script src="../dist/audiokeys.js"></script>
<style>
img
{
width: 100%;
}
</style>
</head>
<body>
<label for="rows">Keyboard Layout:</label>
<select name="rows" id="row-select">
<option value="1">1 Row</option>
<option value="2">2 Rows</option>
</select><br>
<label for="polyphony">Polyphony:</label>
<select name="polyphony" id="polyphony">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label for="priority">Priority:</label>
<select name="priority" id="priority">
<option value="last">Last</option>
<option value="first">First</option>
<option value="lowest">Lowest</option>
<option value="highest">Highest</option>
</select>
<p></p>
<hr>
<img id="image1" src="../images/audiokeys-mapping-rows1.jpg" alt="">
<img id="image2" src="../images/audiokeys-mapping-rows2.jpg" style="display: none" alt="">
<script>
window.context = new AudioContext();
window.keyboard = new AudioKeys({
polyphony: 1,
rows: 1,
priority: 'last'
});
var oneRowLayout = true;
var image1 = document.querySelector('#image1');
var image2 = document.querySelector('#image2');
var polyphony = document.querySelector('#polyphony');
var priority = document.querySelector('#priority');
document.querySelector('#row-select').addEventListener('change', function(e) {
oneRowLayout = !oneRowLayout;
image1.style.display = oneRowLayout ? 'block' : 'none';
image2.style.display = oneRowLayout ? 'none' : 'block';
keyboard.set('rows', oneRowLayout ? 1 : 2);
});
polyphony.addEventListener('change', function(e) {
keyboard.set('polyphony', +e.target.value);
});
priority.addEventListener('change', function(e) {
keyboard.set('priority', e.target.value);
});
var oscillators = {};
keyboard.down( function(note) {
var o = context.createOscillator();
var g = context.createGain();
o.frequency.value = note.frequency;
o.type = 'triangle';
g.gain.value = 0;
o.connect(g);
g.connect(context.destination);
g.gain.linearRampToValueAtTime(0, context.currentTime);
g.gain.linearRampToValueAtTime(note.velocity / 127, context.currentTime + 0.1);
o.start(0);
oscillators[note.note] = {
oscillator: o,
gain: g
};
});
keyboard.up( function(note) {
if(oscillators[note.note]) {
oscillators[note.note].gain.gain.linearRampToValueAtTime(oscillators[note.note].gain.gain.value, context.currentTime);
oscillators[note.note].gain.gain.linearRampToValueAtTime(0, context.currentTime + 0.1);
oscillators[note.note].oscillator.stop(context.currentTime + 0.1);
delete oscillators[note.note];
}
});
</script>
</body>
</html>