原生 JavaScript30 练习 Day 1 (原生JS控制键盘模拟击鼓)
- 2020 年 8 月 30 日
- 筆記
- JavaScript 专栏 No.1
代码如下
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<link rel=”stylesheet” href=”1.css”>
</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>
<script>
(function() {
function removeTransition(event) {
if (event.propertyName !== ‘transform’) return; // 过滤其中一种事件
event.target.classList.remove(‘playing’); // 移除高亮的样式
}
function playSound(event) {
const audio = document.querySelector(`audio[data-key=”${event.keyCode}”]`); // 根据触发按键的键码，获取对应音频
const key = document.querySelector(`div[data-key=”${event.keyCode}”]`); // 获取页面对应按钮 DIV 元素
if (!audio) return; // 处理无效的按键事件
// console.log(key)
key.classList.add(‘playing’); // 改变样式
audio.currentTime = 0; // 每次播放之后都使音频播放进度归零
audio.play(); // 播放相应音效
}
const keys = Array.from(document.querySelectorAll(‘.key’)); // 获取页面所有按钮元素
keys.forEach(key => key.addEventListener(‘transitionend’, removeTransition)); // 添加 transition 事件监听
window.addEventListener(‘keydown’, playSound);
})();
</script>
</body>
</html>
音频文件可自行在网上寻找~~或加我QQ 1262060219 记得备注，谢谢
