欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript Drum kit

程序员文章站 2022-07-01 13:45:01
用 JavaScript 实现网页鼓乐器,相关的初始代码在 JavaScript30 官网和 GitHub 上已经存在。我把 sound 文件夹下的音频全部替换掉了,一些相关解释也直接在注释中标明。 下面是最终成品地址,可能有些卡顿,音频加载也比较慢: 结果展示 index.html:

用 javascript 实现网页鼓乐器,相关的初始代码在 javascript30 官网和 github 上已经存在。我把 sound 文件夹下的音频全部替换掉了,一些相关解释也直接在注释中标明。

下面是最终成品地址,可能有些卡顿,音频加载也比较慢:

index.html:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>js drum kit</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="keys">
    <div data-key="65" class="key">
      <!--<kbd> 标签定义键盘文本-->
      <kbd>a</kbd>
      <span class="sound">clock</span>
    </div>
    <div data-key="83" class="key">
      <kbd>s</kbd>
      <span class="sound">pin</span>
    </div>
    <div data-key="68" class="key">
      <kbd>d</kbd>
      <span class="sound">gong</span>
    </div>
    <div data-key="70" class="key">
      <kbd>f</kbd>
      <span class="sound">ding-dong</span>
    </div>
    <div data-key="71" class="key">
      <kbd>g</kbd>
      <span class="sound">pulse</span>
    </div>
    <div data-key="72" class="key">
      <kbd>h</kbd>
      <span class="sound">robot</span>
    </div>
    <div data-key="74" class="key">
      <kbd>j</kbd>
      <span class="sound">wooden fish</span>
    </div>
    <div data-key="75" class="key">
      <kbd>k</kbd>
      <span class="sound">toaster</span>
    </div>
    <div data-key="76" class="key">
      <kbd>l</kbd>
      <span class="sound">bell</span>
    </div>
  </div>

  <audio data-key="65" src="sound/clock.mp3"></audio>
  <audio data-key="83" src="sound/pin.mp3"></audio>
  <audio data-key="68" src="sound/gong.mp3"></audio>
  <audio data-key="70" src="sound/ding-dong.mp3"></audio>
  <audio data-key="71" src="sound/pulse.mp3"></audio>
  <audio data-key="72" src="sound/robot.mp3"></audio>
  <audio data-key="74" src="sound/wooden fish.mp3"></audio>
  <audio data-key="75" src="sound/toaster.mp3"></audio>
  <audio data-key="76" src="sound/bell.mp3"></audio>

  <script>
    function removetransition(e) {
      if (e.propertyname !== 'transform') return;
      e.target.classlist.remove('playing');
    }

    function playsound(e) {
      const audio = document.queryselector(`audio[data-key="${e.keycode}"]`);
      const key = document.queryselector(`div[data-key="${e.keycode}"]`);
      if (!audio) return;

      key.classlist.add('playing');
      audio.currenttime = 0;
      audio.play();
    }
    const keys = array.from(document.queryselectorall('.key'));
    keys.foreach(key => key.addeventlistener('transitionend',
      removetransition));
    window.addeventlistener('keydown', playsound);

    /*
    1. foreach() 方法用于调用数组的每个元素,并将元素传递给回调数。
    语法:array.foreach(function(currentvalue, index, arr),thisvalue)
    2. addeventlistener() 方法用于向指定元素添加事件句柄。
    element.addeventlistener(event, function, usecapture)
    transitionend:该事件在 css 完成过渡后触发。
    3. 箭头函数
    x => x * x
    上面的箭头函数相当于:
    function (x) {
        return x * x;
    }
    */
  </script>

</body>

</html>

style.css:

html {
  font-size: 10px;
  background: white bottom center;
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.keys {
  display: flex;
  flex: 1;  /*让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容*/
  min-height: 100vh;
  /*align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式*/
  align-items: center;
  justify-content: center;  /*元素在页面主轴上的排列,此处居中*/
}

.key {
  border: 4px solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;  
  /*
  语法 transition: property duration timing-function delay;
  transition-property   规定设置过渡效果的 css 属性的名称。
  transition-duration   规定完成过渡效果需要多少秒或毫秒。
  transition-timing-function    规定速度效果的速度曲线。
  transition-delay  定义过渡效果何时开始。
  */
  width: 10rem;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 .5rem black;
  /*语法 text-shadow: h-shadow v-shadow blur color; */
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

kbd {
  display: block;
  font-size: 4rem;
}

.sound {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: greenyellow;
}

参考:
javascript drum kit 中文指南