1、键盘+音乐

最新推荐文章于 2022-12-03 23:53:41 发布

弱鸡如我

最新推荐文章于 2022-12-03 23:53:41 发布

阅读量215

点赞数

分类专栏：原生JavaScript练习

本文链接：https://blog.csdn.net/qq_37152533/article/details/108399916

版权

原生JavaScript练习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

关键技术：

元素获取；
键盘、transitionend监听；
类的添加、删除

<!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>A</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
    <div data-key="70" class="key">
      <kbd>F</kbd>
      <span class="sound">openhat</span>
    </div>
    <div data-key="71" class="key">
      <kbd>G</kbd>
      <span class="sound">boom</span>
    </div>
    <div data-key="72" class="key">
      <kbd>H</kbd>
      <span class="sound">ride</span>
    </div>
    <div data-key="74" class="key">
      <kbd>J</kbd>
      <span class="sound">snare</span>
    </div>
    <div data-key="75" class="key">
      <kbd>K</kbd>
      <span class="sound">tom</span>
    </div>
    <div data-key="76" class="key">
      <kbd>L</kbd>
      <span class="sound">tink</span>
    </div>
  </div>

  <audio data-key="65" src="sounds/clap.wav"></audio>
  <audio data-key="83" src="sounds/hihat.wav"></audio>
  <audio data-key="68" src="sounds/kick.wav"></audio>
  <audio data-key="70" src="sounds/openhat.wav"></audio>
  <audio data-key="71" src="sounds/boom.wav"></audio>
  <audio data-key="72" src="sounds/ride.wav"></audio>
  <audio data-key="74" src="sounds/snare.wav"></audio>
  <audio data-key="75" src="sounds/tom.wav"></audio>
  <audio data-key="76" src="sounds/tink.wav"></audio>

  <script>
    const keys = Array.from(document.querySelectorAll('.key')); // 获取页面所有按钮元素
    keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // 添加 transition 事件监听
    document.onkeydown = function (event) {
      var e = event || window.event || arguments.callee.caller.arguments[0];
      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
      const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
      if (!audio) return; // 处理无效的按键事件
      audio.currentTime = 0;//保证按键被按住不放时，可以马上响起连续鼓点声
      audio.play();
      key.classList.add('playing');
    }
    function removeTransition(event) {
      if (event.propertyName !== 'transform') return;
      event.target.classList.remove('playing');
    }


  </script>

</body>

</html>

弱鸡如我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
1、键盘+音乐

关键技术：元素获取；键盘、transitionend监听；类的添加、删除<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS Drum Kit</title> <link rel="stylesheet" href="style.css"></head><body> &l
复制链接

扫一扫