注册网站会不会有问题,淄博网站制作公司服务,苏州知名互联网公司,如何创作个人网站HTML5技术实现的小钢琴 用HTML5实现的小钢琴#xff0c;按下钢琴键上的相应字母用或用鼠标点击钢琴键发声#xff0c;源码如下#xff1a;
!DOCTYPE html
html langen
headmeta charsetUTF-8meta namev…HTML5技术实现的小钢琴 用HTML5实现的小钢琴按下钢琴键上的相应字母用或用鼠标点击钢琴键发声源码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title用HTML5实现的小钢琴/titlestyle.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
bodydiv idA classkeyA/divdiv idS classkeyS/divdiv idD classkeyD/divdiv idF classkeyF/divdiv idG classkeyG/divdiv idH classkeyH/divdiv idJ classkeyJ/divdiv idK classkeyK/divscript// 创建一个新的AudioContext实例用于处理音频const audioContext new (window.AudioContext || window.webkitAudioContext)();// 播放特定频率的声音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); // 0.3秒后停止播放}// 获取所有的琴键元素const keys document.querySelectorAll(.key);keys.forEach(key {// 为每个琴键添加鼠标点击事件key.addEventListener(click, () {playNote(key.textContent); // 播放琴键对应的音符animatePress(key); // 触发按键动画效果});});// 监听键盘按下事件document.addEventListener(keydown, (event) {const keyName event.key.toUpperCase(); // 获取按键名并转为大写const keyElement document.getElementById(keyName); // 获取对应的琴键元素if (keyElement) {playNote(keyName); // 播放琴键对应的音符animatePress(keyElement); // 触发按键动画效果}});// 触发琴键按下的动画效果function animatePress(keyElement) {keyElement.classList.add(active); // 添加按下状态的样式类setTimeout(() {keyElement.classList.remove(active); // 在100毫秒后移除按下状态的样式类}, 100); // 这个时间应该与CSS中的过渡时间一致}// 根据音符播放声音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
代码中使用了JavaScript中的箭头函数Arrow Function语法。箭头函数是ES6中的一种函数声明方式它的语法比较简洁。箭头函数的基本格式是(参数) {函数体}。
keys.forEach(key { })
箭头函数的参数是key表示forEach遍历的每个元素。
key.addEventListener(click, () { })
它是给每个琴键添加鼠标点击事件的代码。addEventListener 方法用于给元素添加事件监听器。这里添加了一个点击事件的监听器当用户点击琴键时箭头函数会被执行。
我对乐理了解很少相关音高pitch请参考这里https://www.autopiano.cn/toolbox/pitch 用浏览器运行效果如下 你可以用英文状态下按下琴键上的字符或用鼠标单击琴键试试了。 钢琴演奏中滑音是通过在音符之间平滑地滑动手指使音符之间产生连贯的过渡效果。
上面的代码滑动按键能产生了滑音效果但滑动鼠标不能现在修改上面程序使用鼠标都能产生了滑音效果。
修改后源码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title用HTML5实现的小钢琴2/titlestyle.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
bodydiv idA classkeyA/divdiv idS classkeyS/divdiv idD classkeyD/divdiv idF classkeyF/divdiv idG classkeyG/divdiv idH classkeyH/divdiv idJ classkeyJ/divdiv idK classkeyK/divscriptconst 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; // 设置鼠标按下状态为trueplayNoteFromElement(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请注意这段代码包含了对鼠标按下、移动和松开以及键盘按下的事件监听。
你可以在此基础上继续改进优化。
