bongos.js

/*
Adds an input to bongo.cat so you can preset your own tunes.
*/

(() => {
  const simulateKey = (simKey) => {
    var instrument = InstrumentPerKeyEnum[simKey.toUpperCase()];
    var key = KeyEnum[simKey.toUpperCase()];
    if (instrument !== undefined && key !== undefined) {
        $.play(instrument, key, true);
        setTimeout(() => $.play(instrument, key, false), 100);
    }
  };
  const simulateKeyString = (simKeyString = '') => simKeyString.split('').forEach((k, i) => { if (k !== ' ') { setTimeout(() => simulateKey(k), i * 150); } i++; });
  const existingElement = document.querySelector('.letsPlayBongosWithJavascript');
  if (existingElement) {
    document.body.removeChild(existingElement);
  }
  const wrap = document.createElement('div');
  wrap.classList.add('letsPlayBongosWithJavascript');
  wrap.setAttribute('style', `position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;`);
  document.body.appendChild(wrap);
  const input = document.createElement('input');
  input.setAttribute('style', `font-size: 3em; padding: 10px; border-radius: 5px;`);
  input.value = 'p o p u uoutw';
  wrap.appendChild(input);
  const playButton = document.createElement('button');
  playButton.setAttribute('style', `font-size: 3em; padding: 5px 15px; border-radius: 5px;`);
  playButton.innerHTML = ':arrow_forward:';
  wrap.appendChild(playButton);
  const playIt = () => simulateKeyString(input.value);
  input.addEventListener('keydown', e => { if (e.keyCode === 13) { playIt(); } });
  input.addEventListener('mousedown', e => { e.stopPropagation(); });
  playButton.addEventListener('click', e => { playIt(); });
  playButton.addEventListener('mousedown', e => { e.preventDefault(); e.stopPropagation(); });
})();