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 相关文章推荐
收集的10个免费的jQuery相册
Feb 26 Javascript
JS求平均值的小例子
Nov 29 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
微信小程序实现的一键复制功能示例
Apr 24 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
如何用JS实现简单的数据监听
May 06 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伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
JavaScript的Cookies
2008/01/16 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
幼儿园数学教学反思
2014/02/02 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
留学推荐信英文范文
2015/03/26 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
MySQL插入数据与查询数据
2022/03/25 MySQL
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript