Reverb keyboard

Developer
Rich Williams
Size
4,507 Kb
Views
16,192
  1. Reverb keyboard Previews
  2. Reverb keyboard HTML Codes
  3. Reverb keyboard CSS Codes
  4. Reverb keyboard JS Codes

How do I make an reverb keyboard?

Reverb keyboard using Web Audio API.. What is a reverb keyboard? How do you make a reverb keyboard? This script and codes were developed by Rich Williams on 07 December 2022, Wednesday.

Reverb keyboard Previews
IQ Test

Reverb keyboard - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reverb keyboard</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Reverb keyboard</h1> <div class="notes"> <div class="note">A<small>A5</small></div> <div class="note">W<small>A#5</small></div> <div class="note">S<small>B5</small></div> <div class="note">D<small>C5</small></div> <div class="note">R<small>C#5</small></div> <div class="note">F<small>D5</small></div> <div class="note">T<small>D#5</small></div> <div class="note">G<small>E5</small></div> <div class="note">H<small>F5</small></div> <div class="note">U<small>F#5</small></div> <div class="note">J<small>G5</small></div> <div class="note">I<small>G#5</small></div> <div class="note">K<small>A6</small></div> <div class="note">O<small>A#6</small></div> <div class="note">L<small>B6</small></div> <div class="note">;<small>C6</small></div> <div class="note">[<small>C#6</small></div> <div class="note">'<small>D6</small></div> <div class="note">]<small>D#6</small></div> <div class="note">\<small>E6</small></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Reverb keyboard - Script Codes CSS Codes

.container { padding: 5px;
}
.notes { position: relative; padding: 0 10px 10px; border-top: 1px solid #888; font-weight: bold;
}
.note { margin: 10px 5px; padding: 5px; border: 1px solid #888; width: 50px; height: 50px; border-radius: 5px; text-align: center; float: left;
}
.note small { display: block; font-size: 10px; font-weight: normal;
}

Reverb keyboard - Script Codes JS Codes

"use strict";
var NOTES = { 65: { playing: false, osc: null, freq: 440.00 }, 87: { playing: false, osc: null, freq: 466.16 }, 83: { playing: false, osc: null, freq: 493.88 }, 68: { playing: false, osc: null, freq: 523.25 }, 82: { playing: false, osc: null, freq: 554.37 }, 70: { playing: false, osc: null, freq: 587.33 }, 84: { playing: false, osc: null, freq: 622.25 }, 71: { playing: false, osc: null, freq: 659.25 }, 72: { playing: false, osc: null, freq: 698.46 }, 85: { playing: false, osc: null, freq: 739.99 }, 74: { playing: false, osc: null, freq: 783.99 }, 73: { playing: false, osc: null, freq: 830.61 }, 75: { playing: false, osc: null, freq: 880.00 }, 79: { playing: false, osc: null, freq: 932.33 }, 76: { playing: false, osc: null, freq: 987.77 }, 186: { playing: false, osc: null, freq: 1046.50 }, 219: { playing: false, osc: null, freq: 1108.73 }, 222: { playing: false, osc: null, freq: 1174.66 }, 221: { playing: false, osc: null, freq: 1244.51 }, 220: { playing: false, osc: null, freq: 1318.51 }
};
// note max / min / play count
var notesMax = 20, notesMin = 0;
// AudioContext
var ac = new (AudioContext || webkitAudioContext)();
// Gain and reverb
var gain = ac.createGain(), convolver = ac.createConvolver(), compressor = ac.createDynamicsCompressor(), dest = ac.destination;
// Compressor settings
compressor.threshold.value = -50;
compressor.knee.value = 10;
compressor.ratio.value = 15;
compressor.attack.value = 0;
compressor.release.value = 0.25;
// connect reverb to gain
convolver.connect(dest);
// set up gain
gain.gain.value = 0.75;
gain.connect(compressor).connect(convolver);
// reverb buffers / sources
var soundSource, reverbBuffer;
var onLoad = function onLoad() { var data = request.response; if (data) { ac.decodeAudioData(data, function (buffer) { reverbBuffer = buffer; soundSource = ac.createBufferSource(); soundSource.buffer = reverbBuffer; convolver.buffer = reverbBuffer; // add keyboard event listeners init(); }, function (e) { console.log("Error", e); }); }
};
// create and send request (for reverb audio)
var request = new XMLHttpRequest(), url = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/11314/AbernyteGrainSilo.m4a";
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.addEventListener("load", onLoad);
request.send();
// init
var init = function init() { window.addEventListener("keydown", checkKey); window.addEventListener("keyup", checkKey);
};
// check key and play / switch off oscs
var checkKey = function checkKey(e) { var note = NOTES[e.keyCode], eventType = e.type; if (note) { if (eventType === "keydown" && !note.playing) { var osc = ac.createOscillator(); osc.frequency.value = note.freq; osc.connect(gain); osc.start(); note.playing = true; note.osc = osc; } else if (eventType === "keyup" && note.playing) { note.osc.stop(); note.osc.disconnect(); note.osc = null; note.playing = false; } }
};
Reverb keyboard - Script Codes
Reverb keyboard - Script Codes
Home Page Home
Developer Rich Williams
Username toneworm
Uploaded December 07, 2022
Rating 3
Size 4,507 Kb
Views 16,192
Do you need developer help for Reverb keyboard?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rich Williams (toneworm) Script Codes
Name
D3 simple interaction test
D3 animation test
Woll Smoth Tronslotor
Chooser
Dichotomiser
Little box shadow man and sun
Slidey boxes
Weird spirally CSS thing
Impossible typing test
Horrible looking fadey transition tabs
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!