cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="bg">
  <div id="loading"></div>
  <p class="load">Loading</p>
  <div class="row">
    <div id="piano-container">
      <div id="piano">
        <div class="details top left"></div>
        <div class="details top right"></div>
        <div id="header"></div>
        <div id="spanner"></div>
        <div id="inset">
          <div id="spool"></div>
          <div class="left panel"></div>
          <div class="paper left"></div>
          <div class="paper mid small" title="edit">
            <i id="guide" class="fa fa-hand-pointer-o bounce"></i>
            <div id="grid">
              <div id="lines">
                <div id="tooltip"></div>
              </div>
              <div id="addLine">+</div>
            </div>
          </div>
          <div class="paper right"></div>
          <div class="right panel"></div>
        </div>
        <div id="upper-middle"></div>
        <div id="middle"></div>
        <div id="keys" title="Click the spool above to write music">
          <div id="keys-white"></div>
          <div id="keys-black"></div>
        </div>
        <div class="details bottom left"></div>
        <div class="details bottom right"></div>
        <div class="foot left"></div>
        <div class="foot right"></div>
      </div>
      <div id="buttons">
        <div id="playBtn" title="play"><i class="fa fa-play"></i></div>
        <div id="resetBtn" title="reset"><i class="fa fa-trash"></i></div>
        <div id="saveBtn" title="save"><i class="fa fa-floppy-o"></i></div>
        <div id="loadBtn" title="load"><i class="fa fa-keyboard-o"></i></div>
      </div>
      <div id="config">
        <input type="text" id="loadSong" /><p id="copyText">Copy the text above to your clipboard.</p><button id="loader">Load Song</button>
      </div>
    </div>
    <div id="modal"></div>
    <div id="samples"><h1>Sample Songs</h1>
      <ul>
        <li class="sampleSong" name="paintItBlack">Paint it Black</li>
        <li class="sampleSong" name="daylight">Daylight</li>
        <li><i class="fa fa-spinner"></i></li>
      </ul>
    </div>
  </div>
</div>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Slabo+27px');
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
	40% {
    transform: translateY(-30px);
  }
	60% {
    transform: translateY(-15px);
  }
}

#bg {
  height: 100vh;
  width: 100%;
  background-color: #B3E5FC;
  padding: 1px;
}
#loading {
  z-index: 8;
  position: absolute;
  background-color: #FFFDE7;
  height: 300px;
  width: 300px;
  left: calc(50% - 150px);
  top: calc(50% - 150px);
  border-radius: 50%;
}
p.load {
  z-index: 8;
  color: white;
  position: absolute;
  top: calc(50% + 160px);
  left: calc(50% - 28px);
}
.row {
  margin: 10px auto 0;
  height: 400px;
  width: 40%;
  max-width: 600px;
  min-width: 500px;
}
#piano-container {
  display: inline-block;
}
#piano {
  width: 300px;
  height: 300px;
  background-color: #795548;
  position: relative;
  -webkit-perspective: 60px;
  perspective: 60px;
}
.details {
  z-index: 2;
  height: 0;
  width: 10px;
  position: absolute;
  border-top: 100px solid #4E342E;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.details.top {
  top: 10px;
}
.details.bottom {
  bottom: 10px;
  width: 20px;
}
.details.left {
  left: 5px;
}
.details.right {
  right: 5px;
}
#header {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 300px;
  background-color: #3E2723;
}
#spanner {
  z-index: 3;
  position: absolute;
  top: 10px;
  left: 7px;
  height: 5px;
  width: 286px;
  background-color: #8D6E63;
  border-radius: 10px;
}
#inset {
  position: absolute;
  background-color: transparent;
  border: 5px solid #4E342E;
  height: 40px;
  width: 170px;
  top: 50px;
  left: 60px;
}
.panel {
  background-color: #3E2723;
  height: 40px;
  width: 40px;
  float: left;
}
.panel.right {
  float: right;
}
#spool {
  height: 10px;
  width: 90px;
  background-color: black;
  position: absolute;
  left: 40px;
  top: 15px;
}
#guide {
  position: absolute;
  color: #3E2723;
  top: 10px;
  right: 0;
}
#guide.bounce {
  transition-property: transform;
  transition-duration: 1s;
  animation-name: bounce; 
  animation-duration: 2s; 
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.paper {
  position: absolute;
  height: 30px;
  width: 3px;
  top: 5px;
  display: none;
  background: -webkit-linear-gradient(#BDBDBD, #FFFDE7, #BDBDBD);
  background: -o-linear-gradient(#BDBDBD, #FFFDE7, #BDBDBD);
  background: -moz-linear-gradient(#BDBDBD, #FFFDE7, #BDBDBD);
  background: linear-gradient(#BDBDBD, #FFFDE7, #BDBDBD);
  background-color: #FFFDE7;
  -moz-border-image: -moz-linear-gradient(top, #BDBDBD 0%, #FFFDE7 100%);
	-webkit-border-image: -webkit-linear-gradient(top, #BDBDBD 0%, #FFFDE7 100%);
	border-image: linear-gradient(to bottom, #BDBDBD 0%, #FFFDE7 100%);
}
.paper.left {
  left: 45px;
  border-left: 2px solid #FFFDE7;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.paper.mid {
  z-index: 5;
  border: none;
  -webkit-transition: all 0.5s linear ;
  -moz-transition: all 0.5s linear ;
  -o-transition: all 0.5s linear ;
  transition: all 0.5s linear ;
}
.paper.mid.small {
  left: calc(50% - 35px);
  top: calc(50% - 15px);
  width: 70px;
  height: 30px;
  background: -webkit-linear-gradient(#BDBDBD, #FFFDE7, #BDBDBD);
  background: -o-linear-gradient(#BDBDBD, #FFFDE7, #BDBDBD);
  background: -moz-linear-gradient(#BDBDBD, #FFFDE7, #BDBDBD);
  background: linear-gradient(#BDBDBD, #FFFDE7, #BDBDBD);
  cursor: pointer;
}
.paper.mid.large {
  left: calc(50% - 400px);
  top: calc(10%);
  min-width: 800px;
  height: 80%;
  background: none;
  background-color: #FFFDE7;
  overflow: auto;
  overflow-x: hidden;
}
.paper.right {
  right: 45px;
  border-right: 2px solid #FFFDE7;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.punchRow {
  height: 2px;
  margin-bottom: 4px;
}
.punch {
  height: 2px;
  width: 2px;
  background-color: transparent;
  display: inline-block;
}
#grid {
  width: 800px;
  padding: 10px 0 0 3px;
  display: none;
}
#grid .keyPunch {
  height: 40px;
  width: 7px;
  display: inline-block;
  border: 1px solid #FFE082;
  box-sizing: border-box;
  margin-top: 20px;
  margin-left: 2px;
  cursor: pointer;
}
#grid .keyPunch.selected {
  background-color: #FFE082;
}
#grid .keyPunch.offKey {
  cursor: default;
  background-color: #757575;
  border: none;
}
#grid #tooltip {
  z-index: 6;
  position: absolute;
  top: 0;
  left: 0;
  min-height: 42px;
  min-width: 30px;
  text-align: center;
  padding-top: 7px;
  background-color: white;
  border-radius: 50px;
  border: 1px solid black;
  display: none;
}
#grid #tooltip.black {
  background-color: black;
  color: white;
}
#grid #tooltip span:last-child{
  display: block;
}
[id^='interval'] {
  margin: 15px 0 0 10px;
}
#addLine {
  color: #FFE082;
  font-size: 5em;
  font-weight: 800;
  float: right;
  margin-right: 40px;
  cursor: pointer;
}
#upper-middle {
  position: absolute;
  top: 110px;
  left: 0;
  width: 300px;
  height: 30px;
  background-color: #8D6E63;
}
#middle {
  z-index: 3;
  position: absolute;
  top: 140px;
  left: -8px;
  height: 48px;
  width: 316px;
  background-color: #3E2723;
  -webkit-transform: rotateX(7deg);
  transform: rotateX(7deg);
}
#keys {
  z-index: 4;
  position: relative;
  background-color: #FFFDE7;
  height: 36px;
  width: 260px;
  margin: 0 auto;
  top: 136px;
  -webkit-transform: rotateX(7deg);
  transform: rotateX(7deg);
}
#keys .key.white {
  height: 36px;
  border: 1px solid #9E9E9E;
  border-right: none;
  width: 5px;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  background-color: transparent;
}
#keys .key.black {
  position: relative;
  top: -37px;
  background-color: black;
  height: 26px;
  width: 4px;
  display: inline-block;
  float: left;
}
#keys .key.pressed {
  background-color: #9E9E9E;
}
.foot {
  z-index: 3;
  position: absolute;
  width: 60px;
  bottom: 0;
  border-bottom: 20px solid #3E2723;
}
.foot.left {
  border-right: 10px solid transparent;
  left: 0;
}
.foot.right {
  border-left: 10px solid transparent;
  right: 0;
}
#modal {
  z-index:4;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 1;
}
#buttons {
  margin: 10px 0 0 13px;
  width: 300px;
  
}
[id$="Btn"] {
  background-color: #00B0FF;
  width: 30px;
  height: 20px;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  color: white;
  padding: 10px;
  font-size: 1.2rem;
  border-radius: 5px;
  margin-right: 20px;
}
[id$="Btn"]:last-child {
  margin-right: 0;
}
[id$="Btn"].ready {
  background-color: #2962FF;
}
#config {
  width: 295px;
  margin: 10px auto 0;
  display: none;
  text-align: center;
}
#copyText {
  display: none;
}
#loader {
  display: none;
}
::-webkit-scrollbar {
    width: 2px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
#samples {
  font-family: 'Slabo 27px', serif;
  width: 30%;
  float: right;
  height: 300px;
  background-color: #FFF9C4;
  display: inline-block;
  color: #795548;
  border-radius: 5px;
  font-size: 1.1rem;
}
#samples h1 {
  font-size: 1.4rem;
  text-align: center;
}
#samples ul {
  list-style: none;
  padding-left: 28px;
  cursor: pointer;
}
#samples ul li{
  margin-bottom: 10px;
}
#samples li i {
  height: 10px;
  width: 10px;
  margin: 0 0 0 10px;
  display: none;
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@media screen and (max-width: 600px) {
  .row { 
    width: 100%;
    min-width: 0;
  }
  .row div#samples {
    display: block;
    float: none;
    width: 90%;
    margin: 0 auto 10px;
    height: 120px;
  }
  #piano-container {
    display: block;
    width: 100%;
  }
  #piano{
    margin: 0 auto;
  }
  #buttons {
    margin: 10px 0 0;
    width: 100%;
  }
  #buttons > div {
    display: block;
    width: 90%;
    margin: 10px auto 0;
  }
  .paper.mid.large {
    overflow-x: auto;
  }
}
            
          
!
            
              var lines = 1;
$(function() {
  var songObj = {},
      margin1 = [7,12,14,19,24,26,31,36,38,43,48,50,58,55,60,62,67,72,74,79,84,86],
      margin6 = [5,10,17,22,29,34,41,46,53,58,65,70,77,82];
  
  for(var i = 1; i <= 88; i++) {
    var keyColor = 'white',
        keyStyle = '';
    
    if(margin1.indexOf(i) >= 0 || margin6.indexOf(i) >= 0 || i === 2) {
      keyColor = 'black';
      if(margin1.indexOf(i) >= 0) keyStyle+= ' style="margin-left: 1px"';
      else if(margin6.indexOf(i) >= 0) keyStyle+= ' style="margin-left: 6px"';
      else keyStyle+= ' style="margin-left: 3px"';
    }
    
    $('#keys-' + keyColor).append($('<div id="key' + i + '" class="key ' + keyColor + '"' + keyStyle + '>'));
  }
  
  for(var i = 0; i < 3; i++) {
    var row = $('<div class="punchRow">');
    $('.paper.mid').append(row);
    for(var j = 0; j < 35; j++) {
      $(row).append('<div id="' + i + '-' + j + '" class="punch">')
    }
  }
  
  addLine(lines);
  stopLoading();
  $('#lines').on('click', '.keyPunch:not(.offKey)', function(event) {
    event.stopPropagation();
    $(this).toggleClass('selected');
  }).on('mouseenter', '.keyPunch', function(event) {
    event.stopPropagation();
    var thisPunch = $(this);
    var tempTitle = $(thisPunch).attr('id'),
        title = ($(thisPunch).hasClass('offKey') ? 'No .mp3 available for this key' : tempTitle.substr(tempTitle.indexOf('punch') + 5));
    
    $('#tooltip').show().css('top', $(thisPunch).position().top + $('.paper.mid').scrollTop() + 60).css('left', $(thisPunch).position().left).addClass(margin1.indexOf(+title) < 0 && margin6.indexOf(+title) < 0 && title !=2 ? 'white' : 'black').html('<span>' + title + '</span><span>' + getNote(title) + '</span>');
  }).on('mouseleave', '.keyPunch', function(event) {
    event.stopPropagation();
    $('#tooltip').removeClass('white black').hide();
  });
  $('.paper.small').on('click', function(event) {
    event.stopPropagation();
    if($(this).hasClass('small')) {
      $('i#guide').remove();
      openSpool();
    }
  });
  $('#modal').on('click', function(event) {
    event.stopPropagation();
    closeSpool();
    songObj = buildSong();
  });
  $('#addLine').on('click', function(event) {
    event.stopPropagation();
    lines++;
    addLine(lines);
  });
  $('#playBtn').on('click', function(event) {
    event.stopPropagation();
    $(this).removeClass('ready');
    if($('#playBtn i').hasClass('fa-play')) $('#playBtn i').removeClass('fa-play').addClass('fa-stop');
    else $('#playBtn i').removeClass('fa-stop').addClass('fa-play');
    playSong(songObj, 1);
  });
  $('#resetBtn').on('click', function(event) {
    event.stopPropagation();
    songObj = resetAll();
  });
  $('#saveBtn').on('click', function(event) {
    event.stopPropagation();
    $('#config').show();
    $('#loadSong').val(JSON.stringify(songObj));
    $('#copyText').show();
    $('#loader').hide();
  });
  $('#loadBtn').on('click', function(event) {
    event.stopPropagation();
    $('#loadSong').val('');
    $('#config').show();
    $('#copyText').hide();
    $('#loader').show();
  });
  $('#loader').on('click', function(event) {
    event.stopPropagation();
    var lineCount = 0;
    $('#config').hide();
    songObj = JSON.parse($('#loadSong').val());
    loadSpool(songObj);
    openSpool();
  });
  $('.sampleSong').on('click', function(event) {
    $('li i').show();
    event.stopPropagation();
    resetAll();
    songObj = JSON.parse(samples[$(this).attr('name')]);
    loadSpool(songObj);
    $('li i').hide();
  });
  $('#grid').on('click', function(event) {
    event.stopPropagation();
  });
});
  
var addLine = function(line) {
  var intervalField = $('<div id="interval-' + (line - 1) + '">Interval: <input type="text" placeholder="milliseconds" autofocus /></div>'),
      newLine = $('<div class="punchLine">');
  
  if(line > 1) $('#grid #lines').append(intervalField);
  for(var i = 1; i <= 88; i++) {
    var newPunch = $('<div id="line' + line + 'punch' + i + '" class="keyPunch">');
    if(i > 64 && i < 85) $(newPunch).addClass('offKey');
    $(newLine).append(newPunch);
  }
  $('#grid #lines').append(newLine); 
  $(".paper.mid").animate({
    scrollTop: $('#grid').height()
  }, 200);
  
  $('[id^="interval"]').on('click', function(event) {
    event.stopPropagation();
    $(this).find('input')[0].focus();
  });
}

var resetAll = function () {
  lines = 1;
  $('.punchLine').remove();
  $('.keyPunch').remove();
  $('[id^="interval"]').remove();
  addLine(lines);
  rollSpool([],[],[]);
  $('#loadSong').val('');
  $('#playBtn').removeClass('ready');
  $('#config').hide();
  $('#copyText').hide();
  
  return {};
}

var buildSong = function() {
  var songObj = {};
  for(var i = 0; i < $('.punchLine').length; i++) {
    var tempLine = $('.punchLine')[i];
    for(var j = 0; j < $(tempLine).find('.keyPunch.selected').length; j++) {
      var line = i + 1,
          tempEl = $(tempLine).find('.keyPunch.selected')[j],
          punch = $(tempEl).attr('id').substring($(tempEl).attr('id').indexOf('punch') + 5);

      addNote(punch);
      if(songObj[line]) songObj[line].notes.push(punch);
      else {
        var myInterval = $('div#interval-' + line + ' input').val();
        if(!myInterval) myInterval = 500;
        songObj[line] = {notes: [punch], interval: +myInterval};
      }
    }
  }
  rollSpool(songObj[1], songObj[2], songObj[3]);
  return songObj;
}

var playSong = function(songObj, count) {
  if($(window).width() < 600 && count === 1) {
    alert("Unfortunately, this web app doesn't yet work well on mobile devices due to issues with autoplayback of mp3s. Please try visiting from a desktop.");
  }
  var timedInterval = 500;
  if(songObj[count - 1] && songObj[count - 1].interval) timedInterval = songObj[count - 1].interval;
  setTimeout(function() {
    if(songObj[count]) {
      for(var j = 0; j < songObj[count].notes.length; j++) {
        var keyToPlay = $('#audio' + songObj[count].notes[j])[0];
        keyToPlay.pause();
        keyToPlay.currentTime=0;
        try {
          keyToPlay.play();
        }
        catch(err) {
          localStorage.removeItem('pianoKey' + songObj[count].notes[j]);
          $('#audio' + songObj[count].notes[j]).remove();
          
          addNote(songObj[count].notes[j]);
          var keyToPlay = $('#audio' + songObj[count].notes[j])[0];
          keyToPlay.play();
        }
        pressKey(songObj[count].notes[j]);
      }
    }
    rollSpool(songObj[count], songObj[count + 1], songObj[count + 2]);
    if(count < lines && $('#playBtn i').hasClass('fa-stop')) playSong(songObj, ++count);
    else $('#playBtn i').removeClass('fa-stop').addClass('fa-play');
  }, timedInterval);
}

var pressKey = function(keyNumber) {
  $('#key' + keyNumber).addClass('pressed');
  setTimeout(function() {
    $('#key' + keyNumber).removeClass('pressed');
  }, 500);
}

var rollSpool = function(top, middle, bottom) {
  $('.punch').css('background-color', 'transparent');
  if(top && top.notes) {
    for(var i = 0; i < top.notes.length; i++) {
      var tempMatch = Math.floor(top.notes[i]/2.5);
      $('.punch[id="0-' + tempMatch + '"]').css('background-color', 'black');
    }
  }
  if(middle && middle.notes) {
    for(var i = 0; i < middle.notes.length; i++) {
      var tempMatch = Math.floor(middle.notes[i]/2.5);
      $('.punch[id="1-' + tempMatch + '"]').css('background-color', 'black');
    }
  }
  if(bottom && bottom.notes) {
    for(var i = 0; i < bottom.notes.length; i++) {
      var tempMatch = Math.floor(bottom.notes[i]/2.5);
      $('.punch[id="2-' + tempMatch + '"]').css('background-color', 'black');
    }
  }
};

var loadSpool = function(songObj) {
  resetAll();
  for(var prop in songObj) {
    lines++;
     if(lines > 1) addLine(lines);
    
    for(var i = 0; i < songObj[prop].notes.length; i++) {
      var tempLine = $('.punchLine')[prop - 1];
      
      $(tempLine).children('[id$="punch' + songObj[prop].notes[i] + '"]').addClass('selected');
      addNote(songObj[prop].notes[i]);
    }
    $('#interval-' + (+prop) + ' input').val(songObj[prop].interval);
  }
  rollSpool(songObj[1], songObj[2], songObj[3]);
  $('#playBtn').addClass('ready');
}

var stopLoading = function() {
  $('#loading').removeClass('rotate');
  $('p.load').animate({
    opacity: '0'
  }, 1000, function() {
    closeSpool(1);
  });
}

var closeSpool = function(fromLoad) {
  var newWidth = fromLoad ? '30px' : '80px',
      newLeft = fromLoad ? 70 : 45,
      newInterval = fromLoad ? 1000 : 0;
  
  $('#modal').animate({
    opacity: '0'
  }, 1000, function() {
    $(this).hide();
  });
  $('#grid').hide();
  $('.paper.mid').hide();
  $('#loading').show();
  $('#loading').animate({
    left: $('.left.panel').offset().left + newLeft,
    top: $('.left.panel').offset().top + 5,
    height: '30px',
    width: newWidth,
    padding: '0',
    opacity: '1'
  }, 500, function() {
    $('.punchRow').show();
    $(this).animate({
      width: '80px',
      left: $('.left.panel').offset().left + 45,
      borderTopLeftRadius: 0, 
      borderTopRightRadius: 0, 
      borderBottomLeftRadius: 0, 
      borderBottomRightRadius: 0
    }, newInterval, function() {
      $('.paper.mid').removeClass('large').addClass('small');
      $('.paper.mid').insertAfter('.paper.left');
      $('.paper').show();
      $(this).hide();
    });
  });
}

var openSpool = function() {
  $('#modal').show().css('opacity', 0);
  $('#modal').animate({
    opacity: '.8'
  }, 1000);
  $('.paper').hide();
  $('.punchRow').hide();
  $('.paper.mid').appendTo('#bg');
  $('.paper.mid').removeClass('small');
  $('.paper.mid').addClass('large');
  $('#loading').show();
  $('#loading').animate({
    width: '100%',
    left: '0',
    top: '0',
    height: '500px',
    opacity: '0'
  }, 500, function() {
      $(this).hide();
      $('.paper.mid').show();
      $('#grid').show();
  });
}

var addNote = function(keyNumber) {
  if(!$('#audio' + keyNumber).length) {
    var src = localStorage.getItem('pianoKey' + keyNumber),
        uri = keySounds[keyNumber].uri;
    
    if(!uri) localStorage.removeItem('pianoKey' + keyNumber);
    
    if(!src && uri) {
      localStorage.setItem('pianoKey' + keyNumber, uri);
      src = localStorage.getItem('pianoKey' + keyNumber);
    }
    
    if(src) $('<audio id="audio' + keyNumber + '"></audio>').attr({'src': src}).appendTo('body');
  }
}

var getNote = function(number) {
  var obj = {
    1: 'A#',
    3: 'B',
    4: 'C',
    5: 'C#',
    6: 'D',
    7: 'D#',
    8: 'E',
    9: 'F',
    10: 'F#',
    11: 'G',
    12: 'G#',
    13: 'A',
    14: 'A#',
    15: 'B',
    16: 'C',
    17: 'C#',
    18: 'D',
    19: 'D#',
    20: 'E',
    21: 'F',
    22: 'F#',
    23: 'G',
    24: 'G#',
    25: 'A',
    26: 'A#',
    27: 'B',
    28: 'c',
    29: 'c#',
    30: 'd',
    31: 'd#',
    32: 'e',
    33: 'f',
    34: 'f#',
    35: 'g',
    36: 'g#',
    37: 'a',
    38: 'a#',
    39: 'b',
    40: "c'",
    41: "c#'",
    42: "d'",
    43: "d#'",
    44: "e'",
    45: "f'",
    46: "f#'",
    47: "g'",
    48: "g#'",
    49: "a'",
    50: "a#'",
    51: "b'",
    52: 'c"',
    53: 'c#"',
    54: 'd"',
    55: 'd#"',
    56: 'e"',
    57: 'f"',
    58: 'f#"',
    59: 'g"',
    60: 'g#"',
    61: 'a"',
    62: 'a#"',
    63: 'b"',
    64: "c'''",
    85: 'a""',
    86: 'a#""',
    87: 'b""',
    88: 'c""'
  }
  
  return obj[number];
}
var samples = {
  daylight: '{"1":{"notes":["53"],"interval":500},"2":{"notes":["49"],"interval":200},"3":{"notes":["51"],"interval":200},"4":{"notes":["53"],"interval":300},"5":{"notes":["51"],"interval":200},"6":{"notes":["49"],"interval":200},"7":{"notes":["53"],"interval":200},"8":{"notes":["53"],"interval":200},"9":{"notes":["53"],"interval":500},"10":{"notes":["49"],"interval":200},"11":{"notes":["51"],"interval":200},"12":{"notes":["53"],"interval":200},"13":{"notes":["51"],"interval":200},"14":{"notes":["49"],"interval":200},"15":{"notes":["56"],"interval":200},"16":{"notes":["53"],"interval":200}}',
  paintItBlack: '{"1":{"notes":["56"],"interval":400},"2":{"notes":["58"],"interval":400},"3":{"notes":["59"],"interval":400},"4":{"notes":["61"],"interval":400},"5":{"notes":["59"],"interval":400},"6":{"notes":["58"],"interval":400},"7":{"notes":["56"],"interval":400},"8":{"notes":["56"],"interval":400},"9":{"notes":["55"],"interval":400},"10":{"notes":["56"],"interval":400},"11":{"notes":["58"],"interval":300},"12":{"notes":["56"],"interval":300},"13":{"notes":["58"],"interval":100},"14":{"notes":["56"],"interval":100},"15":{"notes":["55"],"interval":1000},"16":{"notes":["56"],"interval":400},"17":{"notes":["58"],"interval":400},"18":{"notes":["59"],"interval":400},"19":{"notes":["61"],"interval":400},"20":{"notes":["59"],"interval":400},"21":{"notes":["58"],"interval":400},"22":{"notes":["56"],"interval":400},"23":{"notes":["56"],"interval":400},"24":{"notes":["55"],"interval":400},"25":{"notes":["56"],"interval":400},"26":{"notes":["58"],"interval":400},"27":{"notes":["55"],"interval":1500},"28":{"notes":["20","32"],"interval":400},"29":{"notes":["20","32","35","39","44"],"interval":600},"30":{"notes":["18","30","34","37","42"],"interval":500},"31":{"notes":["18","30","34","37","42"],"interval":350},"32":{"notes":["23","27","30","35"],"interval":400},"33":{"notes":["23","27","30","35"],"interval":300},"34":{"notes":["18","30","34","37"],"interval":400},"35":{"notes":["18","30","34","37"],"interval":300},"36":{"notes":["20","32","35","39"],"interval":400},"37":{"notes":["20","32","35","39"],"interval":200},"38":{"notes":["20","35","39"],"interval":300},"39":{"notes":["20","34","37"],"interval":200},"40":{"notes":["20","35"],"interval":300},"41":{"notes":["15","27","30","34","39"],"interval":500}}'
};
            
          
!
999px
Loading ..................

Console