JSFiddle - React, Tailwind, and code Playground

by Eve Weinberg

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://tonejs.github.io/CDN/latest/Tone.min.js"></script>
<div id="wrapper"></div>
<button>
Hi
</button>

CSS

.boxes {
  background-color: #FFA0DB;
  border: 2px;
  border-radius: 10px;
  margin: 1%;
  width: 27%;
  height: 40%;
  position: relative;
  display: inline-block;
  float: left;
  overflow: hidden; }

.boxes:hover {
  background-color: #FF4FD0; }

p {
  color: #1CA1C1; }

#wrapper {
  background: black;
  left: 0px;
  top: 0px;
  width: 400px
  position: absolute; }

/*# sourceMappingURL=style.css.map */

JavaScript

var rows = 5;
var colNum = 3;
var totalNotes = 12;
var musicScale = ["A","B","C","D","E","F","G"]
var octave = 4;

$(document).ready(function () {

    var synth = new Tone.Synth({
            "oscillator" : {
                "type" : "square"
            },
            "envelope" : {
                "attack" : 0.01,
                "decay" : 0.2,
                "sustain" : 0.2,
                "release" : 0.2,
            }
        }).toMaster();




/////////draw all the boxes with their notes///////////////
 for (i = 0; i < totalNotes; i++) {

        allBoxes(i);
    }

 ////////////////   


function allBoxes(i) {
    
    // var radius = 100;
    var imageObject = $("<div class='boxes'></div>")

    imageObject.attr('id', 'layer' + i);

    imageObject.mousedown(function (evt) {
    console.log('clicked', imageObject)
       console.log("\""+musicScale[i%musicScale.length]+octave+"\"")
       synth.triggerAttack("\""+musicScale[i%musicScale.length]+"\"", 3);
    })

    imageObject.mouseup(function (evt) {
        console.log('up')
         synth.triggerRelease();
     })
  
    $('body').append(imageObject);
}


});







/*
var chain = new Tone.CtrlMarkov({
"A3": ["B3","Ab2"],
"Ab2": [{value:"B3",probability:0.2},{value:"A3", probability:0.8}],
"B3": "A3"
});

var synth = new Tone.FMSynth().toMaster();

chain.value = "A3";


for (var i=0;i<40;i++){
//
synth.triggerAttackRelease(chain.value,0.1,i*0.3);
//get the next state in the Markov chain
chain.next();
}

*/