<div id="container">

  <section id="midi-data">
    <ul></ul>
  </section>

  <div class="instrument" id="keyboard">
    <section id="octave">
      <b class="key-af" data-note="56">Ab</b>
      <i class="key-a" data-note="57">A</i>
      <b class="key-bf" data-note="58">Bb</b>
      <i class="key-b" data-note="59">B</i>
      <i class="key-c" data-note="60">C</i>
      <b class="key-cs" data-note="61">C#</b>
      <i class="key-d" data-note="62">D</i>
      <b class="key-ef" data-note="63">Eb</b>
      <i class="key-e" data-note="64">E</i>
      <i class="key-f" data-note="65">F</i>
      <b class="key-fs" data-note="66">F#</b>
      <i class="key-g" data-note="67">G</i>
      <b class="key-af" data-note="68">Ab</b>
      <i class="key-a" data-note="69">A</i>
      <b class="key-bf key-last" data-note="70">Bb</b>
    </section>
  </div><!--instrument-->
</div><!--container-->
$lightGrey: hsla(0,0%,90%,1);
$darkGrey: hsla(0,0%,18%,1);
$pink: hsla(340,88%,60%,1);
$green: hsla(154,85%,44%,1);
$blue: hsla(194,98%,44%,1);
$orange: hsla(38,95%,55%,1);

$backgroundColor: $darkGrey;

body {background: $backgroundColor;}

#container {
  width:300px; height:200px;
  padding:20px; margin:0px auto;
  background: hsla(0,0%,18%,1);
}

#midi-data {
  position:relative; overflow:hidden;
  height: 200px; margin-bottom:30px;
  background:transparentize(white,0.1);
    border:10px solid $pink;
  ul {
    position:absolute; left:0px; bottom:0px;
    padding:1em;
    li {
      padding:0.2em 0.2em 0.2em 1em;
      font-size:1.2em;
      font-family: monospace;
      &:last-child, &:nth-last-child(2) {
        font-weight:bold;
        animation:flash 1s;
        &:before {content:"> "; margin-left:-1em;}
      }
    }
  }
}
@keyframes flash {
  0% {color:$pink;}
  100% {color:black;}
}

#octave {
  box-shadow:0px 0px 1px 1px lightgrey;
  overflow:hidden; position:relative;
  i, b {
    display:inline-block;
    position:relative; z-index:5;
    box-shadow:1px 1px darkgrey;
    color: transparent;
  }
  i {
    width:34px; height:176px;
    background:white;
  }
  b {
    z-index:10;
    width:26px; height:104px;
    margin:0px -15px;
    background:black;
  }
  .key-last {position:absolute; top:0px; right:0px;}
}
View Compiled 
var allKeys = document.getElementById('octave').children,
    dataList = document.querySelector('#midi-data ul')

for (var i=0; i<allKeys.length; i++) {
  allKeys[i].addEventListener('mousedown', function() {
    this.style.backgroundColor = 'hsla(340,88%,60%,1)';
    var newItem = document.createElement('li');
newItem.appendChild(document.createTextNode('[144,'+this.dataset.note+',100]'));
    dataList.appendChild(newItem);
  });
  allKeys[i].addEventListener('mouseup', function() {
    if (this.nodeName === 'B') {
      this.style.backgroundColor = 'black';
    } else {
      this.style.backgroundColor = 'white';
    }
    var newItem = document.createElement('li');
newItem.appendChild(document.createTextNode('[128,'+this.dataset.note+',64]'));
    dataList.appendChild(newItem);
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.