javascript实现简单小钢琴有声弹奏效果
更新时间：2024年02月24日 17:01:13 作者：软件技术爱好者
用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实现简单小钢琴内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
Math对象是一个内置对象,具有数学常数和函数的属性和方法,不是一个函数对象,下面这篇文章主要给大家介绍了关于javascript中内置对象Math的介绍及用法案例的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要为大家详细介绍了js+canvas实现可自动吸附闭合的鼠标绘制多边形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了微信公众平台获取access_token的方法步骤,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了javascript如何实现多边形碰撞检测，帮助大家更好的理解和使用js，感兴趣的朋友可以了解下2020-10-10
第一次接触JS require.js模块化工具，本文为大家介绍了JS模块化工具require.js教程第一课认识require.js，编写require.js，感兴趣的小伙伴们可以参考一下2016-04-04
一个不错的示例使用javascript实现的促销倒计时且同时拥有fixed固定在底部，而且兼容ie6，喜欢的朋友可以参考下2013-09-09
让iframe自适应高度（支持XHTML，支持FF）...2007-07-07
这篇文章主要介绍了js中一维数组和二维数组互转,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
这篇文章主要介绍了js中取得变量绝对值的方法,较为详细的分析了js中abs方法取绝对值的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了JS实现简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
最新评论