<div class=page>
<div class=keyboard>
<div class=whitekey id=C></div>
<div class=blackkey id=Cs></div>
<div class=whitekey id=D></div>
<div class=blackkey id=Ds></div>
<div class=whitekey id=E></div>
<div class=whitekey id=F></div>
<div class=blackkey id=Fs></div>
<div class=whitekey id=G></div>
<div class=blackkey id=Gs></div>
<div class=whitekey id=A></div>
<div class=blackkey id=As></div>
<div class=whitekey id=B></div>
</div>
</div>
.keyboard {
  position: relative;
  top: 50%;
  left: 50%;
  width: 160px;
  margin: 0px -80px;
}

.whitekey {
  background: white;
  height: 2em;
  border: 1px solid;
  z-index: 1;
}

.blackkey {
  margin-top: -0.5em;
  margin-bottom: -0.5em;
  background: black;
  height: 1em;
  width: 50%;
  z-index: 2;
  position: relative;
  margin-left: auto; 
  margin-right: 0;
}
var oscillator;
var audioContext;
var octave = 2;

function createAudioContext()
{
    var contextClass = (window.AudioContext ||
        window.webkitAudioContext ||
        window.mozAudioContext ||
        window.oAudioContext);
    if (contextClass) {
        return new contextClass();
    } else {
        alert("Sorry. WebAudio API not supported.");
        return null;
    }
}

function play( frequency )
{
    oscillator = audioContext.createOscillator();
    oscillator.frequency.value = 0;
    oscillator.connect( audioContext.destination );
    oscillator.start(0);
    var now = audioContext.currentTime;
    oscillator.frequency.setValueAtTime(frequency, now);
}

function stoposc()
{
    oscillator.stop();
    oscillator.disconnect();
}

audioContext = createAudioContext();

document.onmouseup = stoposc;

document.getElementById('C').onmousedown = function() {
    play(261.63*octave)
};
document.getElementById('Cs').onmousedown = function() {
    play(277.18*octave)
};
document.getElementById('D').onmousedown = function() {
    play(293.66*octave)
};
document.getElementById('Ds').onmousedown = function() {
    play(311.13*octave)
};
document.getElementById('E').onmousedown = function() {
    play(329.63*octave)
};
document.getElementById('F').onmousedown = function() {
    play(349.23*octave)
};
document.getElementById('Fs').onmousedown = function() {
    play(369.99*octave)
};
document.getElementById('G').onmousedown = function() {
    play(392.00*octave)
};
document.getElementById('Gs').onmousedown = function() {
    play(415.30*octave)
};
document.getElementById('A').onmousedown = function() {
    play(440.00*octave)
};
document.getElementById('As').onmousedown = function() {
    play(466.16*octave)
};
document.getElementById('B').onmousedown = function() {
    play(493.88*octave)
};

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js