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;
  border-radius: 0 0 5px 5px;
}
.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_box__item_diez{
  position: absolute;
  top: 0;
  left: 70%;
  width: 60%;
  height: 60%;
  background: #000000;
  z-index: 1;
  border-radius: 0 0 5px 5px;
}
.piano_box__item_diez:hover{
  background: #565252;
}

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

JavaScript

class Piano {
   state = {
     is_played: false,
     currentNote : false
   };
   params = {
      octaves: 2
   }
   piano  = document.querySelector(".piano_box");
   logBox = document.querySelector(".piano_log");
   context = window.AudioContext ? new AudioContext() : new webkitAudioContext();
   bumbox;
   
   constructor(params = {}) {
    if ("octaves" in params) {
      this.octaves = params.octaves;
    }
    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 = event.target.dataset.octave * 1; // номер октавы 
    let tone =   currentNote[1] != "#" ?  app.octave[currentNote[0]].tone : app.octave[currentNote[0]].diez;
    app.bumbox.frequency.value =  tone * Math.pow(2, (pow) - 1);
    
	  app.bumbox.connect(app.context.destination);
    
    app.log("Звучит нота " + app.state.currentNote);
  };
  
  onMouseDown(event) {
      if (!app.bumbox) {
         app.bumbox = app.context.createOscillator();
         app.bumbox.type = "triangle";
	       app.bumbox.start();
      }
      app.startKeyActive.call(this, event);
  }
  
  onMouseMove(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() { 
  ...