1<?php class=class="string">"keyword">header(class="string">'Content-Type: text/html; charset=utf-class="number">8'); ?>
2<!DOCTYPE html><class="tag">html lang="zh-CN"><class="tag">head><class="tag">meta charset="UTF-class="number">8"><class="tag">meta name="viewport" content="width=device-width,initial-scale=class="number">1.0">
3<class="tag">title>键盘钢琴 - η空间</class="tag">title>
4<class="tag">meta name="description" content="在线键盘钢琴，用键盘弹琴。人人都是作曲家。">
5<class="tag">link rel="stylesheet" href="/tools/share.css"><class="tag">link rel="stylesheet" href="/assets/pet-cat.css">
6<class="tag">style>
7*{margin:class="number">0;padding:class="number">0;box-sizing:border-box}
8body{font-family:class="string">'Outfit',-apple-system,sans-serif;background:class=class="string">"keyword">class=class="string">"comment">#0C0C0C;color:#F7F5F0;min-height:100vh;display:flex;flex-direction:column;align-items:center}
9h1{margin-top:30px;font-size:24px}h1 .a{color:class=class="string">"keyword">class=class="string">"comment">#FF6B35}
10.desc{color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;font-size:13px;margin:6px class="number">0 20px}
11.piano{display:flex;position:relative;user-select:none}
12.white-key{width:48px;height:180px;background:linear-gradient(180deg,class=class="string">"keyword">class=class="string">"comment">#f0f0f0,#e0e0e0);border:1px solid #ccc;border-radius:class="number">0 class="number">0 6px 6px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-size:11px;color:#class="number">888;transition:all .06s;position:relative;z-index:class="number">1;margin-right:-1px}
13.white-key:active,.white-key.active{background:linear-gradient(180deg,class=class="string">"keyword">class=class="string">"comment">#ddd,#ccc);height:176px;box-shadow:inset class="number">0 2px 4px rgba(class="number">0,class="number">0,class="number">0,.class="number">2)}
14.black-key{width:30px;height:110px;background:linear-gradient(180deg,class=class="string">"keyword">class=class="string">"comment">#class="number">333,#1a1a1a);border:1px solid #class="number">000;border-radius:class="number">0 class="number">0 4px 4px;cursor:pointer;position:absolute;z-index:class="number">2;transition:all .06s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;font-size:9px;color:#class="number">666}
15.black-key:active,.black-key.active{background:linear-gradient(180deg,class=class="string">"keyword">class=class="string">"comment">#class="number">555,#class="number">333);height:107px}
16.controls{margin-top:16px;display:flex;gap:10px;align-items:center}
17.btn{padding:8px 20px;border:none;border-radius:8px;font-size:13px;font-weight:class="number">600;cursor:pointer;background:class=class="string">"keyword">class=class="string">"comment">#FF6B35;color:#fff}
18.btn:hover{background:class=class="string">"keyword">class=class="string">"comment">#e85a2a}
19.hint{color:class=class="string">"keyword">class=class="string">"comment">#class="number">555;font-size:12px;margin-top:12px}
20.recording{color:class=class="string">"keyword">class=class="string">"comment">#ef4444;font-size:12px;display:none;align-items:center;gap:4px;font-weight:class="number">600}
21.recording.show{display:flex}
22.recording .dot{width:8px;height:8px;border-radius:class="number">50%;background:class=class="string">"keyword">class=class="string">"comment">#ef4444;animation:pulse 1s infinite}
23@keyframes pulse{class="number">0%,class="number">100%{opacity:class="number">1}class="number">50%{opacity:class="number">0.3}}
24</class="tag">style></class="tag">head><class="tag">body>
25<class="tag">h1><class="tag">span class=class="string">"keyword">class="a">🎹</class="tag">span> 键盘钢琴</class="tag">h1>
26<class="tag">p style="font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555;margin-bottom:10px;text-align:center">🎹 键盘 A S D F G H J = Do Re Mi Fa Sol La Si · W E T Y U = 黑键</class="tag">p>
27<class="tag">p class=class="string">"keyword">class="desc">键盘弹琴 · A S D F G H J = Do Re Mi Fa Sol La Si</class="tag">p>
28<class="tag">div class=class="string">"keyword">class="piano" id="piano"></class="tag">div>
29<class="tag">div class=class="string">"keyword">class="controls">
30<class="tag">button class=class="string">"keyword">class="btn" onclick="playDemo()">🎵 小星星</class="tag">button>
31<class="tag">span style="color:class=class="string">"keyword">class=class="string">"comment">#class="number">555;font-size:13px">|</class="tag">span>
32<class="tag">div class=class="string">"keyword">class="recording" id="recording"><class="tag">span class=class="string">"keyword">class="dot"></class="tag">span> 录音中...</class="tag">div>
33</class="tag">div>
34<class="tag">div class=class="string">"keyword">class="hint">🎯 用键盘 A-L 弹白键，W E T Y U 弹黑键</class="tag">div>
35<class="tag">script src="/tools/share.js"></class="tag">script><class="tag">script src="/assets/pet-cat.js"></class="tag">script>
36<class="tag">script>
37class=class="string">"keyword">var notes=[
38 {note:class="string">'C',freq:class="number">261.63,key:class="string">'a',label:class="string">'A'},
39 {note:class="string">'Cclass="keyword">class="comment">#',freq:class="number">277.18,key:class="string">'w',label:class="string">'W',black:true},
40 {note:class="string">'D',freq:class="number">293.66,key:class="string">'s',label:class="string">'S'},
41 {note:class="string">'Dclass="keyword">class="comment">#',freq:class="number">311.13,key:class="string">'e',label:class="string">'E',black:true},
42 {note:class="string">'E',freq:class="number">329.63,key:class="string">'d',label:class="string">'D'},
43 {note:class="string">'F',freq:class="number">349.23,key:class="string">'f',label:class="string">'F'},
44 {note:class="string">'Fclass="keyword">class="comment">#',freq:class="number">369.99,key:class="string">'t',label:class="string">'T',black:true},
45 {note:class="string">'G',freq:class="number">392.00,key:class="string">'g',label:class="string">'G'},
46 {note:class="string">'Gclass="keyword">class="comment">#',freq:class="number">415.30,key:class="string">'y',label:class="string">'Y',black:true},
47 {note:class="string">'A',freq:class="number">440.00,key:class="string">'h',label:class="string">'H'},
48 {note:class="string">'Aclass="keyword">class="comment">#',freq:class="number">466.16,key:class="string">'u',label:class="string">'U',black:true},
49 {note:class="string">'B',freq:class="number">493.88,key:class="string">'j',label:class="string">'J'},
50 {note:class="string">'C2',freq:class="number">523.25,key:class="string">'k',label:class="string">'K'}
51];
52class=class="string">"keyword">var ctx=null;
53class=class="string">"keyword">function getCtx(){class=class="string">"keyword">if(!ctx)try{ctx=class=class="string">"keyword">new(window.AudioContext||window.webkitAudioContext)();}class="func">catch(e){}class=class="string">"keyword">return ctx;}
54class=class="string">"keyword">function playNote(note){
55 class=class="string">"keyword">var c=getCtx();class=class="string">"keyword">if(!c)class=class="string">"keyword">return;
56 class=class="string">"keyword">var o=c.createOscillator(),g=c.createGain();
57 o.connect(g);g.connect(c.destination);
58 o.type=class="string">'triangle';o.frequency.value=note.freq;
59 g.gain.setValueAtTime(class="number">0.4,c.currentTime);
60 g.gain.exponentialRampToValueAtTime(class="number">0.001,c.currentTime+class="number">0.8);
61 o.start(c.currentTime);o.stop(c.currentTime+class="number">0.8);
62 class=class="string">"keyword">class=class="string">"comment">// visual
63 class=class="string">"keyword">var els=document.querySelectorAll(class="string">'[data-key="'+note.key+class="string">'"]');
64 els.forEach(class=class="string">"keyword">function(el){el.classList.add(class="string">'active');
65 class="func">setTimeout(class=class="string">"keyword">function(){el.classList.remove(class="string">'active')},class="number">150);});
66}
67class=class="string">"keyword">function buildPiano(){
68 class=class="string">"keyword">var p=document.class="func">getElementById(class="string">'piano');
69 class=class="string">"keyword">var whites=[],blacks=[];
70 notes.forEach(class=class="string">"keyword">function(n,i){
71 class=class="string">"keyword">if(n.black)blacks.push(n);class=class="string">"keyword">else whites.push(n);});
72 whites.forEach(class=class="string">"keyword">function(n,i){
73 class=class="string">"keyword">var d=document.createElement(class="string">'div');d.className=class="string">'white-key';
74 d.textContent=n.label;d.setAttribute(class="string">'data-key',n.key);
75 d.class="func">addEventListener(class="string">'click',class=class="string">"keyword">function(){playNote(n)});
76 class=class="string">"keyword">class=class="string">"comment">// position black keys
77 class=class="string">"keyword">var bn=null;class=class="string">"keyword">if(i<class="tag">blacks.length&&((i===class="number">0||i===class="number">1||i===class="number">3||i===class="number">4||i===class="number">5)))bn=blacks.shift();
78 p.appendChild(d);
79 class=class="string">"keyword">if(bn){
80 class=class="string">"keyword">var dd=document.createElement(class="string">'div');dd.className=class="string">'black-key';
81 dd.textContent=bn.label.toUpperCase();dd.setAttribute(class="string">'data-key',bn.key);
82 dd.style.left=(i*class="number">48+class="number">35)+class="string">'px';
83 dd.class="func">addEventListener(class="string">'click',class=class="string">"keyword">function(nn){class=class="string">"keyword">return class=class="string">"keyword">function(){playNote(nn)}}(bn));
84 p.appendChild(dd);}
85 });
86}
87class=class="string">"keyword">class=class="string">"comment">// keyboard
88document.class="func">addEventListener(class="string">'keydown',class=class="string">"keyword">function(e){
89 class=class="string">"keyword">var k=e.key.toLowerCase();
90 class=class="string">"keyword">var n=notes.find(class=class="string">"keyword">function(nn){class=class="string">"keyword">return nn.key===k});
91 class=class="string">"keyword">if(n){e.preventDefault();playNote(n);}
92});
93class=class="string">"keyword">class=class="string">"comment">// demo: twinkle twinkle
94class=class="string">"keyword">function playDemo(){
95 class=class="string">"keyword">var melody=[class="string">'C',class="string">'C',class="string">'G',class="string">'G',class="string">'A',class="string">'A',class="string">'G',class="string">'F',class="string">'F',class="string">'E',class="string">'E',class="string">'D',class="string">'D',class="string">'C',
96 class="string">'G',class="string">'G',class="string">'F',class="string">'F',class="string">'E',class="string">'E',class="string">'D',class="string">'G',class="string">'G',class="string">'F',class="string">'F',class="string">'E',class="string">'E',class="string">'D',
97 class="string">'C',class="string">'C',class="string">'G',class="string">'G',class="string">'A',class="string">'A',class="string">'G',class="string">'F',class="string">'F',class="string">'E',class="string">'E',class="string">'D',class="string">'D',class="string">'C'];
98 class=class="string">"keyword">var c=getCtx();class=class="string">"keyword">if(!c)class=class="string">"keyword">return;
99 melody.forEach(class=class="string">"keyword">function(nm,i){
100 class=class="string">"keyword">var n=notes.find(class=class="string">"keyword">function(nn){class=class="string">"keyword">return nn.note===nm});
101 class=class="string">"keyword">if(n){
102 class=class="string">"keyword">var o=c.createOscillator(),g=c.createGain();
103 o.connect(g);g.connect(c.destination);
104 o.type=class="string">'triangle';o.frequency.value=n.freq;
105 g.gain.setValueAtTime(class="number">0.4,c.currentTime+i*class="number">0.25);
106 g.gain.exponentialRampToValueAtTime(class="number">0.001,c.currentTime+i*class="number">0.25+class="number">0.22);
107 o.start(c.currentTime+i*class="number">0.25);o.stop(c.currentTime+i*class="number">0.25+class="number">0.22);}});}
108buildPiano();
109</class="tag">script><class="tag">div style="text-align:center;padding-top:10px;font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555"><class="tag">a href="source-viewer.php?file=keyboard-piano.php" style="color:#FF6B35;text-decoration:none;">📖 查看源码</class="tag">a> · 编程小白，AI生成，若体验不佳请多包涵 🙏</class="tag">div>
110</class="tag">body></class="tag">html>
111
Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/273059_cn/tools/source-viewer.php:69) in /www/wwwroot/273059_cn/tools/source-viewer.php on line 72
Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/273059_cn/tools/source-viewer.php:69) in /www/wwwroot/273059_cn/tools/source-viewer.php on line 73
键盘钢琴 - η空间
🎹 键盘钢琴
🎹 键盘 A S D F G H J = Do Re Mi Fa Sol La Si · W E T Y U = 黑键
键盘弹琴 · A S D F G H J = Do Re Mi Fa Sol La Si
|
录音中...
🎯 用键盘 A-L 弹白键，W E T Y U 弹黑键
📖 查看源码 · 编程小白，AI生成，若体验不佳请多包涵 🙏