Javascript实现打鼓效果


Posted in Javascript onJanuary 29, 2021

本文实例为大家分享了Javascript实现打鼓效果的具体代码,供大家参考,具体内容如下

Javascript实现打鼓效果

按住响应的键盘显示不同的声音

<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>

css部分:

html {
 font-size: 10px;
 background: url('../img/background.jpg') bottom center;
 background-size: cover;
}

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

.keys {
 display: flex;
 flex: 1;
 min-height: 100vh;
 align-items: center;
 justify-content: center;
}

.key {
 border: .4rem solid black;
 border-radius: .5rem;
 margin: 1rem;
 font-size: 1.5rem;
 padding: 1rem .5rem;
 transition: all .07s ease;
 width: 10rem;
 text-align: center;
 color: white;
 background: rgba(0,0,0,0.4);
 text-shadow: 0 0 .5rem black;
}

.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: #ffc600;
}

第一步实现按下键盘实现,声音的播放

window.addEventListener("keydown",function(e){
   console.log(e.keyCode);
   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');

     setTimeout(function(){
     key.classList.remove('playing');
     },70);
    
    //按键之后移出效果
})

keyCode对应图

Javascript实现打鼓效果

Javascript实现打鼓效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 显示当前系统时间代码
Dec 28 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
JS实现点击掉落特效
Jan 29 #Javascript
Javascript实现关闭广告效果
Jan 29 #Javascript
Vue 实例中使用$refs的注意事项
Jan 29 #Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 #Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 #Vue.js
聊聊vue 中的v-on参数问题
Jan 29 #Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 #Vue.js
You might like
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
Node.js编码规范
2014/07/14 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
Vuex简单入门
2017/04/19 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
Python实现删除文件但保留指定文件
2015/06/21 Python
Python3字符串学习教程
2015/08/20 Python
Python 移动光标位置的方法
2019/01/20 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Python json转字典字符方法实例解析
2020/04/13 Python
怎么快速自学python
2020/06/22 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
获奖的大学生创业计划书
2014/01/05 职场文书
英文留学推荐信范文
2014/01/25 职场文书
珍惜水资源建议书
2014/03/12 职场文书
社区创先争优承诺书
2014/08/30 职场文书
家庭困难证明
2014/10/12 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技