cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console