使用jquery简单写一个钢琴

好的，以下是使用 jQuery 实现的简单钢琴：

HTML 代码：

<div id="piano">
  <div class="key white" data-note="C"></div>
  <div class="key black" data-note="C#"></div>
  <div class="key white" data-note="D"></div>
  <div class="key black" data-note="D#"></div>
  <div class="key white" data-note="E"></div>
  <div class="key white" data-note="F"></div>
  <div class="key black" data-note="F#"></div>
  <div class="key white" data-note="G"></div>
  <div class="key black" data-note="G#"></div>
  <div class="key white" data-note="A"></div>
  <div class="key black" data-note="A#"></div>
  <div class="key white" data-note="B"></div>
</div>

CSS 代码：

#piano {
  display: flex;
  justify-content: center;
}

.key {
  width: 50px;
  height: 200px;
  background-color: white;
  border: 1px solid black;
  box-sizing: border-box;
  cursor: pointer;
}

.white {
  margin: 0 5px;
}

.black {
  position: relative;
  width: 30px;
  height: 120px;
  margin: 0 -15px;
  background-color: black;
  z-index: 1;
}

.black:before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 50px 15px;
  border-color: transparent transparent black transparent;
}

.black:after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 15px 0 15px;
  border-color: black transparent transparent transparent;
}

JavaScript 代码：

$(document).ready(function() {
  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  
  $(".key").mousedown(function() {
    var note = $(this).data("note");
    var oscillator = audioCtx.createOscillator();
    oscillator.type = "sine";
    oscillator.frequency.value = getFrequency(note);
    oscillator.connect(audioCtx.destination);
    oscillator.start();
    
    $(this).addClass("active");
  });
  
  $(".key").mouseup(function() {
    var note = $(this).data("note");
    var oscillator = audioCtx.createOscillator();
    oscillator.type = "sine";
    oscillator.frequency.value = getFrequency(note);
    oscillator.connect(audioCtx.destination);
    oscillator.stop();
    
    $(this).removeClass("active");
  });
  
  function getFrequency(note) {
    var frequency;
    switch(note) {
      case "C":
        frequency = 261.63;
        break;
      case "C#":
        frequency = 277.18;
        break;
      case "D":
        frequency = 293.66;
        break;
      case "D#":
        frequency = 311.13;
        break;
      case "E":
        frequency = 329.63;
        break;
      case "F":
        frequency = 349.23;
        break;
      case "F#":
        frequency = 369.99;
        break;
      case "G":
        frequency = 392.00;
        break;
      case "G#":
        frequency = 415.30;
        break;
      case "A":
        frequency = 440.00;
        break;
      case "A#":
        frequency = 466.16;
        break;
      case "B":
        frequency = 493.88;
        break;
    }
    return frequency;
  }
});

以上代码会生成一个简单的钢琴，你可以点击每个琴键发出声音。注意，这只是一个简单的实现，实际上需要更多的代码来实现更高级的功能，如同时按下多个键，增加音效等等。