jQuery toggleClass example

Toggle class name on click in jQuery

by nikolya223

HTML

<div class="piano_box">  
</div>
<div class="piano_log"></div>

CSS

.piano_box{
  display: inline-flex;
  user-select: none;
}

.piano_box__item{
  height: 100px;
  width: 30px;
  border: 1px solid black;
  cursor: pointer;
  transition:.3s ease;
  position: relative;
}
.piano_box__item label{
   transform: rotate(-90deg);
    display: block;
    transform-origin: center;
    width: 100%;
    position: absolute;
    bottom: 13px;
    left: 0;
    pointer-events: none;
}
.piano_box__item:hover{
  background: #cecece;
}

.piano_log{
  margin-top: 10px;
  padding: 5px 10px;
  color: green;
}

JavaScript

class Piano {
   state = {
     is_played: false,
     currentNote : false
   };
   piano  = document.querySelector(".piano_box");
   logBox = document.querySelector(".piano_log");
   context = window.AudioContext ? new AudioContext() : new webkitAudioContext();
   bumbox;
   
   constructor(name) {
    this.init();
   }
  
  log(msg) {
    //console.log(msg);
    this.logBox.innerHTML = msg + '<br>' + this.logBox.innerHTML;
  
  };
  
   startKeyActive (event) { //mouseover and mouseout events for active status keys, pseudo and play audio  
   let currentNote = event.target.dataset.note;
   if (app.state.is_played == false) {
       app.log("Пианино включено");
    } 
    if (currentNote == app.state.currentNote) {
       return;
    }
    
    app.state.currentNote = currentNote;
    app.state.is_played = true;
    
    let pow = 3; // номер октавы
    app.log(currentNote)
    app.bumbox.frequency.value =  app.octave[currentNote].tone * Math.pow(2, (pow) - 1);
    
	  app.bumbox.connect(app.context.destination);
    
    app.log("Звучит нота " + app.state.currentNote);
  };
  
  moveKeyActive(event) {
    if (app.state.is_played) {
       app.startKeyActive.call(this, event);
    }
    
  }
  
  stopKeyActive () { //mouseover and mouseout events for active status keys, pseudo and play audio
    app.state.currentNote = false;
    app.state.is_played = false;
    
    
	   app.bumbox.disconnect(app.context.destination);
	  //app.bumbox.disconnect(app.context.destination);
    
    app.log("Пианино выключено");
  };
  
  init() { 
     this.draw();
     this.piano.addEventListener("mousedown", this.startKeyActive);
     this.piano.addEventListener("mousemove", this.moveKeyActive);
     this.piano.addEventListener("mouseup", this.stopKeyActive);
     this.bumbox = this.context.createOscillator();
     this.bumbox.type = "triangle";
	   this.bumbox.start();
  }
  
  draw() {
     for (const [code, value] of Object.entries(this.octave)) {
      let item =...