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 相关文章推荐
jquery 学习之二 属性相关
Nov 23 Javascript
JQuery live函数
Dec 24 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 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 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
如何基于python实现归一化处理
2020/01/20 Python
python实现吃苹果小游戏
2020/03/21 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
编辑求职信样本
2013/12/16 职场文书
教师辞职报告范文
2014/01/20 职场文书
2014政务公开实施方案
2014/02/19 职场文书
法制宣传口号
2014/06/16 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
爱心助学感谢信
2015/01/21 职场文书
学校实习推荐信
2015/03/27 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
运动会5000米加油稿
2015/07/21 职场文书
公司人事管理制度
2015/08/05 职场文书
学生检讨书范文
2019/06/24 职场文书