javascript实现简单小钢琴有声弹奏效果
作者：软件技术爱好者
用HTML5+javascript实现的小钢琴,按下钢琴键上的相应字母用或用鼠标点击钢琴键发声,javascript代码包含了对鼠标按下、移动和松开,以及键盘按下的事件监听
用HTML5+javascript实现的小钢琴，按下钢琴键上的相应字母用或用鼠标点击钢琴键发声。javascript代码包含了对鼠标按下、移动和松开，以及键盘按下的事件监听。
小钢琴代码原理
代码中使用了JavaScript中的箭头函数（Arrow Function）语法。箭头函数是ES6中的一种函数声明方式，它的语法比较简洁。箭头函数的基本格式是：(参数) => {函数体}。
keys.forEach(key => { })
箭头函数的参数是key，表示forEach遍历的每个元素。
key.addEventListener('click', () => { })
它是给每个琴键添加鼠标点击事件的代码。addEventListener 方法用于给元素添加事件监听器。这里添加了一个点击事件的监听器，当用户点击琴键时，箭头函数会被执行。
小钢琴源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用HTML5实现的小钢琴2</title>
<style>
.key {
width: 50px;
height: 150px;
border: 1px solid black;
display: inline-block;
margin: 5px;
text-align: center;
line-height: 150px;
cursor: pointer;
position: relative;
transition: transform 0.1s;
}
.key.active {
transform: translateY(4px);
}
</style>
</head>
<body>
<div id="A" class="key">A</div>
<div id="S" class="key">S</div>
<div id="D" class="key">D</div>
<div id="F" class="key">F</div>
<div id="G" class="key">G</div>
<div id="H" class="key">H</div>
<div id="J" class="key">J</div>
<div id="K" class="key">K</div>
<script>
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let isMouseDown = false; // 记录鼠标是否被按下
function playSound(frequency) {
const oscillator = audioContext.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
oscillator.connect(audioContext.destination);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.3);
}
const keys = document.querySelectorAll('.key');
keys.forEach(key => {
key.addEventListener('mousedown', (event) => {
isMouseDown = true; // 设置鼠标按下状态为true
playNoteFromElement(event.target);
});
key.addEventListener('mouseenter', (event) => {
if (isMouseDown) { // 如果鼠标处于按下状态，则播放音符
playNoteFromElement(event.target);
}
});
// 鼠标按下并移动到其他琴键时，无需额外mouseup事件监听
});
// 监听文档的mouseup事件，以处理鼠标在琴键外松开的情况
document.addEventListener('mouseup', () => {
isMouseDown = false;
});
// 监听键盘按下事件
document.addEventListener('keydown', (event) => {
const keyName = event.key.toUpperCase(); // 获取按键名并转为大写
const keyElement = document.getElementById(keyName); // 获取对应的琴键元素
if (keyElement && !keyElement.classList.contains('active')) {
playNoteFromElement(keyElement);
}
});
function playNoteFromElement(element) {
const note = element.textContent;
playNote(note);
animatePress(element);
}
function animatePress(keyElement) {
keyElement.classList.add('active');
setTimeout(() => {
keyElement.classList.remove('active');
}, 100);
}
function playNote(note) {
let frequency;
switch (note) {
case 'A':
frequency = 261.63;
break;
case 'S':
frequency = 293.66;
break;
case 'D':
frequency = 329.63;
break;
case 'F':
frequency = 349.23;
break;
case 'G':
frequency = 392.00;
break;
case 'H':
frequency = 440.00;
break;
case 'J':
frequency = 493.88;
break;
case 'K':
frequency = 523.25;
break;
default:
return;
}
playSound(frequency);
}
</script>
</body>
</html>音高频率对照表参考
音高（英语：pitch）在音乐领域里指的是人类心理对音符基频之感受。
声的本质是机械波，所以声速一定时，音的高低是由机械波的频率和波长决定的。频率高、波长短，则音"高"，反之，频率低、波长长，则音"低"。
音高是声音的三大特征之一，区别于音强和音色，音调高只能表示音的频率高和波长短，不能表示振幅大和音强强，这一点很多初学者容易混淆出错，进入误区。我们要把这两者区分开来，不能混为一谈。而音色则是声音的其他波段(如泛音)所决定，这些波段不影响音高，所以音高与音色亦无关系。
音高频率对照表
| 频率，单位为赫兹。括号内为距离中央C（261.63赫兹）的半音距离。 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 八度→ 音名↓ | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| C | 16.352（−48） | 32.703（−36） | 65.406（−24） | 130.81（−12） | 261.63（0） | 523.25（+12） | 1046.5（+24） | 2093.0（+36） | 4186.0（+48） | 8372.0（+60） |
| C♯/D♭ | 17.324（−47） | 34.648（−35） | 69.296（−23） | 138.59（−11） | 277.18（+1） | 554.37（+13） | 1108.7（+25） | 2217.5（+37） | 4434.9（+49） | 8869.8（+61） |
| D | 18.354（−46） | 36.708（−34） | 73.416（−22） | 146.83（−10） | 293.66（+2） | 587.33（+14） | 1174.7（+26） | 2349.3（+38） | 4698.6（+50） | 9397.3（+62） |
| D♯/E♭ | 19.445（−45） | 38.891（−33） | 77.782（−21） | 155.56（−9） | 311.13（+3） | 622.25（+15） | 1244.5（+27） | 2489.0（+39） | 4978.0（+51） | 9956.1（+63） |
| E | 20.602（−44） | 41.203（−32） | 82.407（−20） | 164.81（−8） | 329.63（+4） | 659.26（+16） | 1318.5（+28） | 2637.0（+40） | 5274.0（+52） | 10548（+64） |
| F | 21.827（−43） | 43.654（−31） | 87.307（−19） | 174.61（−7） | 349.23（+5） | 698.46（+17） | 1396.9（+29） | 2793.8（+41） | 5587.7（+53） | 11175（+65） |
| F♯/G♭ | 23.125（−42） | 46.249（−30） | 92.499（−18） | 185.00（−6） | 369.99（+6） | 739.99（+18） | 1480.0（+30） | 2960.0（+42） | 5919.9（+54） | 11840（+66） |
| G | 24.500（−41） | 48.999（−29） | 97.999（−17） | 196.00（−5） | 392.00（+7） | 783.99（+19） | 1568.0（+31） | 3136.0（+43） | 6271.9（+55） | 12544（+67） |
| G♯/A♭ | 25.957（−40） | 51.913（−28） | 103.83（−16） | 207.65（−4） | 415.30（+8） | 830.61（+20） | 1661.2（+32） | 3322.4（+44） | 6644.9（+56） | 13290（+68） |
| A | 27.500（−39） | 55.000（−27） | 110.00（−15） | 220.00（−3） | 440.00（+9） | 880.00（+21） | 1760.0（+33） | 3520.0（+45） | 7040.0（+57） | 14080（+69） |
| A♯/B♭ | 29.135（−38） | 58.270（−26） | 116.54（−14） | 233.08（−2） | 466.16（+10） | 932.33（+22） | 1864.7（+34） | 3729.3（+46） | 7458.6（+58） | 14917（+70） |
| B | 30.868（−37） | 61.735（−25） | 123.47（−13） | 246.94（−1） | 493.88（+11） | 987.77（+23） | 1975.5（+35） | 3951.1（+47） | 7902.1（+59） | 15804（+71） |
总结
到此这篇关于javascript实现简单小钢琴有声弹奏效果的文章就介绍到这了,更多相关javascript实现简单小钢琴内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！