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模拟打鼓效果相关推荐

Cocos Creator下JavaScript模拟射箭效果，附代码
获取代码关注微信公众号,发送[射箭]获取代码效果预览操作方法点击屏幕,屏幕出现起始位置标志的圆点,不松开手指,滑动屏幕,控制力度和方向,移动距离越大,弓箭拉伸效果越大,松开以后,箭将沿着结束点 ...
JavaScript模拟实现先进先出、先进后出效果
JavaScript模拟实现先进先出.先进后出效果 JavaScript模拟实现先进先出.先进后出效果
模拟窗口效果 Jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JavaScript - 模拟键盘输入支付密码
JavaScript - 模拟键盘输入支付密码 Max.Bai 2016-12-29 0x00: 发生了什么事我做自动化测试的时候,需要自动化在页面上输入这个密码,什么样子的,看下面: 有没有很像支 ...
利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。标签： ECharts3Echarts2模拟迁徙百度地图引入
利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图. 很多小伙伴都来要demo源码,现在我把demo放在我的GitHub上了. https://github.com/ ...
javascript模拟点击事件--实现视频自动播放
背景这两年一直在做浏览器开发相关的工作,我们所做的浏览器禁用了视频自动播放功能,以实现视频预加载功能:浏览器在视频播放时为了实现视频秒开效果(就是一点击页面里的播放按钮就立即开始播放,而不 ...
CSS：模拟下雪效果动画制作教程
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
纯css模拟下雪效果
效果如其名,想必都见过下雪(可能南方人除外哈哈),但下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果. 1.前言由于公司产品的活动,需要模拟类似下雪 ...
利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。标签： ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅
利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图. 标签: ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅 ...

Javascript模拟打鼓效果

Javascript模拟打鼓效果相关推荐

最新文章

热门文章