码上掘金之架子鼓：用键盘敲击旋律

2024-01-17 06:40:47

解锁你的音乐潜能：用键盘敲出架子鼓节拍

引言：

准备好释放你内心的节奏大师了吗？想象一下，无需昂贵的架子鼓或占地空间，就能在键盘上敲击出令人振奋的鼓声。现在，你可以借助我们提供的 JavaScript 和 HTML 代码，轻松制作一个简单的架子鼓程序，用键盘演奏属于你的旋律！

打造属于你的虚拟架子鼓

代码准备：

首先，创建一个新的 HTML 文件，并将其保存为 "drum-kit.html"。将以下代码粘贴到文件中：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>

  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    // 创建一个新的 AudioContext 对象
    var audioCtx = new AudioContext();

    // 创建一个新的 GainNode 对象
    var gainNode = audioCtx.createGain();

    // 将 GainNode 对象连接到输出设备
    gainNode.connect(audioCtx.destination);

    // 创建一个新的 OscillatorNode 对象
    var oscillatorNode = audioCtx.createOscillator();

    // 将 OscillatorNode 对象连接到 GainNode 对象
    oscillatorNode.connect(gainNode);

    // 设置 OscillatorNode 对象的波形
    oscillatorNode.type = "sine";

    // 设置 OscillatorNode 对象的频率
    oscillatorNode.frequency.value = 440;

    // 启动 OscillatorNode 对象
    oscillatorNode.start();

    // 监听键盘事件
    document.addEventListener("keydown", function(event) {
      // 获取按下的按键
      var key = event.key;

      // 根据按下的按键设置 OscillatorNode 对象的频率
      switch (key) {
        case "A":
          oscillatorNode.frequency.value = 220;
          break;
        case "S":
          oscillatorNode.frequency.value = 261.6;
          break;
        case "D":
          oscillatorNode.frequency.value = 293.7;
          break;
        case "F":
          oscillatorNode.frequency.value = 329.6;
          break;
        case "G":
          oscillatorNode.frequency.value = 349.2;
          break;
        case "H":
          oscillatorNode.frequency.value = 392;
          break;
        case "J":
          oscillatorNode.frequency.value = 440;
          break;
        case "K":
          oscillatorNode.frequency.value = 493.9;
          break;
        case "L":
          oscillatorNode.frequency.value = 523.3;
          break;
      }

      // 设置 GainNode 对象的音量
      gainNode.gain.value = 0.5;
    });

    // 监听键盘抬起事件
    document.addEventListener("keyup", function(event) {
      // 设置 GainNode 对象的音量为 0
      gainNode.gain.value = 0;
    });
  </script>
</body>
</html>