{ const width = 420; const keyHeight = 100; const height = 120; const whiteKeys = 15; const blackKeys = [1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1]; const whiteOffsets = blackKeys.reduce((x, y) => x.concat([y + x[x.length - 1] + 1]), [0]); const svg = html``; function wrap(elem, note) { const freq = 440 * Math.pow(2, note / 12); // Play a note when clicked. const oscillator = ctx.createOscillator(); const gain = ctx.createGain(); gain.gain.value = 0; oscillator.type = 'square'; oscillator.frequency.setValueAtTime(freq, ctx.currentTime); oscillator.connect(gain); gain.connect(ctx.destination); oscillator.start(); elem.style.cursor = 'pointer'; elem.onclick = () => { gain.gain.cancelScheduledValues(ctx.currentTime); gain.gain.linearRampToValueAtTime(0.1, ctx.currentTime + 0.05); gain.gain.linearRampToValueAtTime(0, ctx.currentTime + 0.3); }; return elem; } // Draw the white keys. for (let i = 0; i <= whiteKeys - 1; i++) { svg.appendChild(wrap(html``, whiteOffsets[i] - 19)); svg.appendChild(html``); } // Draw the black keys. for (let i = 0; i <= whiteKeys - 2; i++) { if (blackKeys[i] == 1) { svg.appendChild(wrap(html``, whiteOffsets[i] - 19 + blackKeys[i])); } } return svg; }