用 JavaScript 實現網頁鼓樂器，相關的初始代碼在 JavaScript30 官網和 GitHub 上已經存在。我把 sound 文件夾下的音頻全部替換掉了，一些相關解釋也直接在註釋中標明。 下麵是最終成品地址，可能有些卡頓，音頻載入也比較慢： 結果展示 index.html: <!DOCT ...
用 JavaScript 實現網頁鼓樂器，相關的初始代碼在 JavaScript30 官網和 GitHub 上已經存在。我把 sound 文件夾下的音頻全部替換掉了，一些相關解釋也直接在註釋中標明。
下麵是最終成品地址，可能有些卡頓，音頻載入也比較慢：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="keys">
<div data-key="65" class="key">
<!--<kbd> 標簽定義鍵盤文本-->
<kbd>A</kbd>
<span class="sound">clock</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">pin</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">gong</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">ding-dong</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">pulse</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">robot</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">wooden fish</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">toaster</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">bell</span>
</div>
</div>
<audio data-key="65" src="sound/clock.mp3"></audio>
<audio data-key="83" src="sound/pin.mp3"></audio>
<audio data-key="68" src="sound/gong.mp3"></audio>
<audio data-key="70" src="sound/ding-dong.mp3"></audio>
<audio data-key="71" src="sound/pulse.mp3"></audio>
<audio data-key="72" src="sound/robot.mp3"></audio>
<audio data-key="74" src="sound/wooden fish.mp3"></audio>
<audio data-key="75" src="sound/toaster.mp3"></audio>
<audio data-key="76" src="sound/bell.mp3"></audio>
<script>
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);
/*
1. forEach() 方法用於調用數組的每個元素，並將元素傳遞給回調數。
語法：array.forEach(function(currentValue, index, arr),thisValue)
2. addEventListener() 方法用於向指定元素添加事件句柄。
element.addEventListener(event, function, useCapture)
transitionend：該事件在 CSS 完成過渡後觸發。
3. 箭頭函數
x => x * x
上面的箭頭函數相當於：
function (x) {
return x * x;
}
*/
</script>
</body>
</html>style.css:
html {
font-size: 10px;
background: white bottom center;
}
body,
html {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.keys {
display: flex;
flex: 1; /*讓所有彈性盒模型對象的子元素都有相同的長度，且忽略它們內部的內容*/
min-height: 100vh;
/*align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式*/
align-items: center;
justify-content: center; /*元素在頁面主軸上的排列，此處居中*/
}
.key {
border: 4px solid black;
border-radius: .5rem;
margin: 1rem;
font-size: 1.5rem;
padding: 1rem .5rem;
transition: all .07s ease;
/*
語法 transition: property duration timing-function delay;
transition-property 規定設置過渡效果的 CSS 屬性的名稱。
transition-duration 規定完成過渡效果需要多少秒或毫秒。
transition-timing-function 規定速度效果的速度曲線。
transition-delay 定義過渡效果何時開始。
*/
width: 10rem;
text-align: center;
color: white;
background: rgba(0, 0, 0, 0.5);
text-shadow: 0 0 .5rem black;
/*語法 text-shadow: h-shadow v-shadow blur color; */
}
.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: greenyellow;
}
