轻松实现架子鼓效果：用原生JS打造沉浸式音乐体验

2023-12-22 08:13:30

原生JS实现架子鼓效果

1. 准备工作

在开始之前，你需要确保你的设备上安装了必要的软件。你将需要一个文本编辑器（如记事本或Sublime Text）和一个网络浏览器（如Chrome或Firefox）。此外，你还需要下载一个音频库，如Howler.js或SoundJS。

2. 创建HTML和CSS文件

首先，创建一个名为“index.html”的HTML文件和一个名为“style.css”的CSS文件。在“index.html”文件中，添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="drum-kit"></div>

  <script src="script.js"></script>
</body>
</html>

在“style.css”文件中，添加以下代码：

#drum-kit {
  width: 600px;
  height: 400px;
  border: 1px solid black;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.drum-pad {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

.drum-pad:active {
  background-color: black;
  color: white;
}

3. 创建JavaScript文件

接下来，创建一个名为“script.js”的JavaScript文件。在该文件中，添加以下代码：

// 导入Howler.js音频库
import Howler from "howler";

// 创建一个架子鼓实例
const drumKit = new DrumKit();

// 创建一个键盘监听器
document.addEventListener("keydown", (e) => {
  // 获取按下的键
  const key = e.key.toUpperCase();

  // 播放对应的音效
  drumKit.play(key);
});

// 创建一个鼠标点击监听器
document.addEventListener("click", (e) => {
  // 获取点击的元素
  const element = e.target;

  // 如果点击的是架子鼓元素
  if (element.classList.contains("drum-pad")) {
    // 获取点击的元素的键值
    const key = element.id.toUpperCase();

    // 播放对应的音效
    drumKit.play(key);
  }
});

// 创建一个触摸屏触摸监听器
document.addEventListener("touchstart", (e) => {
  // 获取触摸的元素
  const element = e.target;

  // 如果触摸的是架子鼓元素
  if (element.classList.contains("drum-pad")) {
    // 获取触摸的元素的键值
    const key = element.id.toUpperCase();

    // 播放对应的音效
    drumKit.play(key);
  }
});

// 架子鼓类
class DrumKit {
  constructor() {
    // 创建一个音效数组
    this.sounds = [
      new Howler({
        src: ["sounds/kick.wav"],
      }),
      new Howler({
        src: ["sounds/snare.wav"],
      }),
      new Howler({
        src: ["sounds/hi-hat.wav"],
      }),
      new Howler({
        src: ["sounds/tom-1.wav"],
      }),
      new Howler({
        src: ["sounds/tom-2.wav"],
      }),
      new Howler({
        src: ["sounds/tom-3.wav"],
      }),
      new Howler({
        src: ["sounds/crash.wav"],
      }),
      new Howler({
        src: ["sounds/ride.wav"],
      }),
      new Howler({
        src: ["sounds/cowbell.wav"],
      }),
    ];

    // 创建一个架子鼓元素数组
    this.drumPads = document.querySelectorAll(".drum-pad");

    // 将架子鼓元素和音效关联起来
    this.drumPads.forEach((drumPad, index) => {
      drumPad.addEventListener("click", () => {
        this.play(index);
      });
    });
  }

  // 播放对应的音效
  play(key) {
    this.sounds[key].play();
  }
}