JavaScript30天挑战 Day1 —— Drum Kit

JavaScript30天挑战 Day1 —— Drum Kit

Artificial-Fool Lv3
  2024-12-08 05:57:03 2024-12-08 05:57:03 Created   2024-12-08 09:31:14 2024-12-08 09:31:14 Updated      

这个系列我可能会先尝试自己摸索，做出来相似的效果后再去和课程比较。

不会的应该会看视频。

demo在文章末尾

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/drumkit.css" />
    <script src="scripts/drumkit.js"></script>
    <title>drumkit</title>
  </head>
  <body>
    <div class="context" id="context">
      <div class="outerbox">
        <div class="box" id="boxA" data-key="a">A</div>
        CLAP
      </div>
      <div class="outerbox">
        <div class="box" id="boxS" data-key="s">S</div>
        SNARE
      </div>
      <div class="outerbox">
        <div class="box" id="boxD" data-key="d">D</div>
        TOM
      </div>
      <div class="outerbox">
        <div class="box" id="boxF" data-key="f">F</div>
        OPENHIHAT
      </div>
      <div class="outerbox">
        <div class="box" id="boxG" data-key="g">G</div>
        COWBELL
      </div>
      <div class="outerbox">
        <div class="box" id="boxH" data-key="h">H</div>
        HIHAT
      </div>
      <div class="outerbox">
        <div class="box" id="boJx" data-key="j">J</div>
        TINK
      </div>
      <div class="outerbox">
        <div class="box" id="boxK" data-key="k">K</div>
        KICK
      </div>
      <div class="outerbox">
        <div class="box" id="boxL" data-key="l">L</div>
        CRASH
      </div>
    </div>

    <audio
      muted
      class="drumkit"
      src="assets/drumkit/clap.wav"
      id="clap"
    ></audio>
    <audio
      muted
      class="drumkit"
      src="assets/drumkit/snare.wav"
      id="snare"
    ></audio>
    <audio muted class="drumkit" src="assets/drumkit/tom.wav" id="tom"></audio>
    <audio
      muted
      class="drumkit"
      src="assets/drumkit/openhihat.wav"
      id="openhihat"
    ></audio>
    <audio
      muted
      class="drumkit"
      src="assets/drumkit/cowbell.wav"
      id="cowbell"
    ></audio>
    <audio
      muted
      class="drumkit"
      src="assets/drumkit/hihat.wav"
      id="hihat"
    ></audio>
    <audio
      muted
      class="drumkit"
      src="assets/drumkit/tink.wav"
      id="tink"
    ></audio>
    <audio
      muted
      class="drumkit"
      src="assets/drumkit/kick.wav"
      id="kick"
    ></audio>

    <audio
      muted
      class="drumkit"
      src="assets/drumkit/crash.wav"
      id="ride"
    ></audio>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
document.addEventListener('DOMContentLoaded', function () {
  const context = document.getElementById('context');
  const drumkit = document.querySelectorAll('.drumkit');
  const keyToIndex = {
    a: 0,
    s: 1,
    d: 2,
    f: 3,
    g: 4,
    h: 5,
    j: 6,
    k: 7,
    l: 8,
  };
  const isPlaying = {};

  function playAudio(key) {
    const index = keyToIndex[key];

    console.log(`Playing audio for key: ${key}, index: ${index}`);
    isPlaying[index] = true;

    // 播放音频
    drumkit[index].muted = false;
    drumkit[index].currentTime = 0;

    drumkit[index].play().catch(error => {
      console.error(
        `Error playing audio for key: ${key}, index: ${index}`,
        error
      );
    });
    console.log(drumkit[index]);
    // 找到对应的 .box 元素并添加 active 类
    const boxElement = document.querySelector(`[data-key="${key}"]`);
    if (boxElement) {
      boxElement.classList.add('active');
      // 移除 active 类（可选：使用 setTimeout 来延迟移除）
      setTimeout(() => {
        boxElement.classList.remove('active');
        console.log('removed');
      }, 200);
    }
  }

  context.addEventListener('click', function (event) {
    const box = event.target.closest('.box');
    if (box) {
      const key = box.getAttribute('data-key');
      playAudio(key);
    }
  });

  document.addEventListener('keydown', function (event) {
    const key = event.key.toLowerCase();
    playAudio(key);
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../assets/bg1.jpg');
  background-size: cover;
  height: 97vh;
}
.context {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
  padding: 30px;
  border-radius: 50px;
  filter: blur(0px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.126);
}
.box {
  border: rgb(255, 255, 255) solid 1px;
  border-radius: 20px;
  width: 120px;
  height: 90px;
  margin: 10px;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.329);
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 100ms ease-out;
  overflow: hidden;
}

.box:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border: rgba(255, 215, 215, 0.76) solid 2px;
  color: rgb(255, 215, 215);
  text-shadow: 0 0 4cap rgba(0, 0, 0, 0.15);
  font-weight: bold;
  font-size: 36px;
  transition: 200ms ease-out;
  background: rgba(0, 0, 0, 0.01);
  width: 128px;
  height: 96px;
  /* transform: scale(1.1); */
}
.box.active {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border: rgba(255, 215, 215, 0.76) solid 2px;
  color: rgb(255, 215, 215);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  font-weight: bold;
  font-size: 36px;
  background: rgba(255, 212, 212, 0.6);
  width: 128px;
  height: 96px;
  transition: 100ms;
}

.outerbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.568);
  letter-spacing: 2px;
  transition: 100ms ease-out;
}

.outerbox:hover {
  letter-spacing: 5px;
  color: rgb(255, 215, 215);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 200ms ease-out;
}

https://test.sydblog.fun/day1_drumkit/drumkit.html

  • Title: JavaScript30天挑战 Day1 —— Drum Kit
  • Author: Artificial-Fool
  • Created at : 2024-12-08 05:57:03
  • Updated at : 2024-12-08 09:31:14
  • Link: https://space.bilibili.com/636023121/2024/12/08/jschallenge1/
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments
On this page
JavaScript30天挑战 Day1 —— Drum Kit