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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
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
PHP setTime 设置当前时间的代码
2012/08/27 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
在Python中进行自动化单元测试的教程
2015/04/15 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Python的log日志功能及设置方法
2019/07/11 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
python读取mysql数据绘制条形图
2020/03/25 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
企业开业庆典答谢词
2015/01/20 职场文书
检讨书大全
2015/01/27 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书