js实现钢琴
实现钢琴的JavaScript方法
使用Web Audio API和键盘事件监听可以创建一个简单的网页钢琴。以下是关键步骤和代码示例。
创建音频上下文
初始化Web Audio API的上下文环境，用于生成和处理声音。
const audioContext = new (window.AudioContext || window.webkitAudioContext)();定义音符频率
钢琴键对应的频率可以通过公式计算或使用预定义的频率表。以下是一个八度内白键的频率（单位：Hz）：
const notes = {
'C': 261.63,
'D': 293.66,
'E': 329.63,
'F': 349.23,
'G': 392.00,
'A': 440.00,
'B': 493.88
};生成音调
创建振荡器节点来产生特定频率的声音波形。
function playNote(frequency) {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.type = 'sine';
oscillator.frequency.value = frequency;
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.start();
gainNode.gain.exponentialRampToValueAtTime(
0.0001,
audioContext.currentTime + 0.5
);
oscillator.stop(audioContext.currentTime + 0.5);
}键盘事件绑定
将计算机键盘映射到钢琴键并触发相应音符。
document.addEventListener('keydown', (e) => {
const keyMap = {
'a': 'C', 's': 'D', 'd': 'E',
'f': 'F', 'g': 'G', 'h': 'A', 'j': 'B'
};
if (keyMap[e.key]) {
playNote(notes[keyMap[e.key]]);
}
});可视化界面
创建HTML元素作为钢琴键，并添加交互样式。
<div class="piano">
<div class="key white" data-note="C"></div>
<div class="key white" data-note="D"></div>
<!-- 更多琴键... -->
</div>.piano {
display: flex;
height: 200px;
}
.key {
border: 1px solid #000;
}
.white {
width: 50px;
background: white;
}扩展功能
增加以下特性可以提升用户体验：
- 添加黑键实现完整八度
- 支持触摸事件用于移动端
- 加入音色选择（正弦波、方波等）
- 录音和回放功能
- 可视化声波显示
完整实现需要考虑浏览器兼容性问题和性能优化，现代浏览器基本都支持Web Audio API。对于更复杂的需求，可以使用专门的音频库如Tone.js简化开发。
