【JavaScript案例】js实现键盘敲击奏响音符

上面是网页页面布局，实现的是当键盘敲击页面对应的字母按键时，响起相应的音符

下面是本案例的代码：

index.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS Drum Kit</title><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="index.js">
</head>
<body><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>
</body>
</html>

style.css:

html {font-size: 10px;background: url('./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;
}

index.js:

 function removeTransition(e) {if (e.propertyName !== 'transform') return;e.target.classList.remove('playing');}function playSound(e) {const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);const key = document.querySelector(`div[data-key="${e.keyCode}"]`);if (!audio) return;key.classList.add('playing');audio.currentTime = 0;audio.play();}const keys = Array.from(document.querySelectorAll('.key'));keys.forEach(key => key.addEventListener('transitionend', removeTransition));window.addEventListener('keydown', playSound);

完整代码资料下载：

【JavaScript案例】js实现键盘敲击奏响音符相关推荐

javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例 by Apurav Chauhan 通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Re ...
【JavaScript】JS事件机制学习
常用的事件通过事件机制,达到与用户的交互,与java的swing交互类似. 主要是结合js的函数使用. 当你添加一个事件之后没有达到想要的效果时,就要检查一下是不是给HTML标签添加了合适的事件,以 ...
(Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能
利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲 ...
JavaScript（JS）（一）
文章目录注 JavaScript基础知识 JavaScript作用: JavaScript写在哪里写在script标签里外部的js文件内,然后引入输入输出语句 JS一些注意事项变量声明变量 ...
如何使用 Javascript/node.js 在 WebRTC 中构建音视频通话APP？
语音和视频通信的嵌入对于现在的互联网产品发展的重要性已经毋庸置疑,WebRTC 事实上是一种通用的技术框架标准,它可以在浏览器之间不需要中介的情况下,实现任意数据流交换.这使得 web 应用程序和移动 ...
selenium java 滚动条_java+selenium使用JS、键盘滑动滚动条
本篇文章介绍如何使用JS和键盘对象对页面进行滑动滚动条-------------主要针对java做自动化测试的同学一:使用键盘对象操作滚动条 //导包 importorg.openqa.seleni ...
php接收键盘事件,js获取键盘事件的方法实例
本文主要和大家分享js获取键盘事件的方法实例,希望能帮助到大家. document.οnkeydοwn=function(event){ var e = event || window.event | ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...
JavaScript（JS）常用正则表达式汇总
文章目录自定义字符串校验函数常用正则表达式自定义字符串校验函数校验字符串是否全由数字组成,是则返回true,否则返回false: function isDigit(str) {var regE ...

【JavaScript案例】js实现键盘敲击奏响音符

【JavaScript案例】js实现键盘敲击奏响音符相关推荐

最新文章

热门文章