Spaces:

kimhyunwoo
/

piano

Running

App Files Files Community

kimhyunwoo commited on 1 day ago

Commit

5959290

verified ·

1 Parent(s): 62e0bdf

Update index.html

Browse files

Files changed (1) hide show

index.html +334 -136

index.html CHANGED Viewed

@@ -3,207 +3,405 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>CSS Piano Interface</title>
     <style>
         body {
             margin: 0;
             height: 100vh;
-            background-color: #000;
             display: flex;
             flex-direction: column;
-            justify-content: flex-end; /* 건반을 하단에 배치 */
             align-items: center;
             overflow: hidden;
-            font-family: sans-serif;
         }
-        .piano-wrapper {
-            /* 16:9 비율을 대략적으로 맞추기 위해 너비를 화면 너비의 일정 비율로 설정하고, 높이는 건반 높이에 맞춤 */
-            width: 90vw; /* 화면 너비의 90% */
-            max-width: 1200px; /* 최대 너비 제한 */
-            height: 25vh; /* 화면 높이의 25% 정도, 건반 높이에 따라 조절 */
-            min-height: 200px; /* 최소 건반 높이 */
             display: flex;
             justify-content: center;
             align-items: flex-end;
-            padding-bottom: 20px; /* 하단 여백 */
         }
         .piano {
             display: flex;
             position: relative;
-            background: linear-gradient(to bottom, #222, #111); /* 건반 뒤쪽 어두운 배경 */
-            padding: 10px 10px 0 10px; /* 건반 상단과 좌우 패딩 */
-            border-radius: 10px 10px 0 0;
-            box-shadow: 0 0 30px rgba(128, 0, 128, 0.4), /* 기본 보라색 빛 */
-                        0 0 50px rgba(255, 105, 180, 0.3); /* 기본 핑크색 빛 */
-            border: 2px solid #444;
             border-bottom: none;
         }
         .key {
             box-sizing: border-box;
             cursor: pointer;
-            user-select: none; /* 텍스트 선택 방지 */
-            -webkit-tap-highlight-color: transparent; /* 모바일 터치 시 하이라이트 제거 */
-            transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, background-color 0.05s ease-out;
         }
         .white-key {
-            width: 50px; /* 흰 건반 너비 */
-            height: 200px; /* 흰 건반 높이 (piano-wrapper 높이와 연관) */
-            background: linear-gradient(to bottom, #f8f8f8, #e0e0e0);
-            border: 1px solid #888;
-            border-bottom: 5px solid #aaa;
-            border-radius: 0 0 5px 5px;
             margin-right: 1px;
-            box-shadow: 0 2px 3px rgba(0,0,0,0.2), inset 0 -2px 2px rgba(255,255,255,0.5);
-            position: relative;
             z-index: 1;
         }
-        .white-key:last-child {
-            margin-right: 0;
-        }
         .black-key {
-            width: 30px; /* 검은 건반 너비 */
-            height: 120px; /* 검은 건반 높이 */
-            background: linear-gradient(to bottom, #333, #111);
-            border: 1px solid #000;
-            border-bottom: 5px solid #222;
-            border-radius: 0 0 3px 3px;
             position: absolute;
             z-index: 2;
-            box-shadow: 0 2px 3px rgba(0,0,0,0.4), inset 0 -2px 2px rgba(100,100,100,0.3);
         }
-        /* 흰 건반 눌렸을 때 효과 */
         .white-key.active {
-            background: linear-gradient(to bottom, #e0e0e0, #d0d0d0);
-            transform: translateY(2px);
             border-bottom-width: 3px;
-            box-shadow: 0 0 20px 5px var(--key-glow-color, rgba(255, 105, 180, 0.8)), /* 핑크색 빛 */
-                        inset 0 -1px 1px rgba(255,255,255,0.3);
         }
-        /* 검은 건반 눌렸을 때 효과 */
         .black-key.active {
-            background: linear-gradient(to bottom, #222, #000);
             transform: translateY(2px);
             border-bottom-width: 3px;
-            box-shadow: 0 0 20px 5px var(--key-glow-color, rgba(255, 105, 180, 0.8)), /* 핑크색 빛 */
-                        inset 0 -1px 1px rgba(100,100,100,0.1);
         }
-        /* 건반 라벨 (선택 사항) */
         .key-label {
             position: absolute;
-            bottom: 10px;
             left: 50%;
             transform: translateX(-50%);
-            font-size: 12px;
-            color: #555;
         }
-        .black-key .key-label {
-            color: #ccc;
         }
-        /* 동적 스타일 주입을 위한 공간 */
-        #dynamic-styles {
-            display: none;
         }
     </style>
 </head>
 <body>
-    <div class="piano-wrapper">
         <div class="piano" id="piano">
-            <!-- JavaScript로 건반 생성 -->
         </div>
     </div>
-    <!-- 동적 스타일 주입용 (눌렸을때 다른 색상 빛) -->
-    <style id="dynamic-styles"></style>
     <script>
-        const piano = document.getElementById('piano');
-        const dynamicStyles = document.getElementById('dynamic-styles');
-        const keysData = [
-            // Octave 3
-            { type: 'white', note: 'C3', label: 'C' },
-            { type: 'black', note: 'C#3', label: 'C#', offset: 0.65 },
-            { type: 'white', note: 'D3', label: 'D' },
-            { type: 'black', note: 'D#3', label: 'D#', offset: 1.7 },
-            { type: 'white', note: 'E3', label: 'E' },
-            { type: 'white', note: 'F3', label: 'F' },
-            { type: 'black', note: 'F#3', label: 'F#', offset: 3.65 },
-            { type: 'white', note: 'G3', label: 'G' },
-            { type: 'black', note: 'G#3', label: 'G#', offset: 4.7 },
-            { type: 'white', note: 'A3', label: 'A' },
-            { type: 'black', note: 'A#3', label: 'A#', offset: 5.75 },
-            { type: 'white', note: 'B3', label: 'B' },
-            // Octave 4
-            { type: 'white', note: 'C4', label: 'C' },
-            { type: 'black', note: 'C#4', label: 'C#', offset: 7.65 },
-            { type: 'white', note: 'D4', label: 'D' },
-            { type: 'black', note: 'D#4', label: 'D#', offset: 8.7 },
-            { type: 'white', note: 'E4', label: 'E' },
-            { type: 'white', note: 'F4', label: 'F' },
-            { type: 'black', note: 'F#4', label: 'F#', offset: 10.65 },
-            { type: 'white', note: 'G4', label: 'G' },
-            { type: 'black', note: 'G#4', label: 'G#', offset: 11.7 },
-            { type: 'white', note: 'A4', label: 'A' },
-            { type: 'black', note: 'A#4', label: 'A#', offset: 12.75 },
-            { type: 'white', note: 'B4', label: 'B' },
-             // Octave 5
-            { type: 'white', note: 'C5', label: 'C' },
         ];
-        const whiteKeyWidth = 50; // CSS와 동일하게
-        let whiteKeyIndex = 0;
-        keysData.forEach(keyData => {
-            const keyElement = document.createElement('div');
-            keyElement.classList.add('key');
-            keyElement.classList.add(keyData.type === 'white' ? 'white-key' : 'black-key');
-            keyElement.dataset.note = keyData.note;
-            // const labelElement = document.createElement('span');
-            // labelElement.classList.add('key-label');
-            // labelElement.textContent = keyData.label;
-            // keyElement.appendChild(labelElement);
-            if (keyData.type === 'black') {
-                // 검은 건반의 offset은 이전 흰 건반의 수에 따라 계산
-                keyElement.style.left = (keyData.offset * (whiteKeyWidth + 1)) + 'px'; // +1은 margin-right 고려
-            } else {
-                whiteKeyIndex++;
             }
-            piano.appendChild(keyElement);
-            // 터치 및 클릭 이벤트 리스너
-            const activateKey = (event) => {
-                event.preventDefault(); // 스크롤 등 기본 동작 방지
-                keyElement.classList.add('active');
-                // 눌린 키에 따라 다른 색상의 빛 효과 (선택 사항)
-                // const randomColor = `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, 0.8)`;
-                // dynamicStyles.innerHTML = `.key.active { --key-glow-color: ${randomColor}; }`;
-            };
-            const deactivateKey = (event) => {
-                event.preventDefault();
-                keyElement.classList.remove('active');
-            };
-            keyElement.addEventListener('mousedown', activateKey);
-            keyElement.addEventListener('mouseup', deactivateKey);
-            keyElement.addEventListener('mouseleave', deactivateKey); // 마우스가 건반 밖으로 나가면 효과 제거
-            keyElement.addEventListener('touchstart', activateKey, { passive: false });
-            keyElement.addEventListener('touchend', deactivateKey);
-            keyElement.addEventListener('touchcancel', deactivateKey);
         });
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Interactive Piano with Falling Notes</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
     <style>
         body {
             margin: 0;
             height: 100vh;
+            background-color: #0a0a0a; /* 어두운 배경 */
             display: flex;
             flex-direction: column;
+            justify-content: flex-end;
             align-items: center;
             overflow: hidden;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
+        .piano-container {
+            width: 95vw;
+            max-width: 1400px; /* 건반이 너무 작아지지 않도록 최대 너비 제한 */
+            height: 30vh; /* 건반 높이 비율 */
+            min-height: 180px;
             display: flex;
             justify-content: center;
             align-items: flex-end;
+            position: relative; /* 노트 떨어지는 영역의 기준 */
+            padding-bottom: 10px;
         }
         .piano {
             display: flex;
             position: relative;
+            background: linear-gradient(to bottom, #282828, #181818);
+            padding: 15px 15px 0 15px;
+            border-radius: 12px 12px 0 0;
+            box-shadow: 0 0 40px rgba(173, 216, 230, 0.3), /* 연한 하늘색 빛 */
+                        0 0 60px rgba(255, 182, 193, 0.2); /* 연한 핑크색 빛 */
+            border: 3px solid #3a3a3a;
             border-bottom: none;
+            height: 100%; /* piano-container 높이에 맞춤 */
         }
         .key {
             box-sizing: border-box;
             cursor: pointer;
+            user-select: none;
+            -webkit-tap-highlight-color: transparent;
+            transition: all 0.05s ease-out;
+            position: relative; /* 라벨 위치 기준 */
         }
         .white-key {
+            width: 40px; /* 더 많은 건반을 위해 너비 약간 줄임 */
+            height: 100%;
+            background: linear-gradient(to bottom, #fdfdfd, #e8e8e8);
+            border: 1px solid #999;
+            border-bottom: 6px solid #b0b0b0;
+            border-radius: 0 0 6px 6px;
             margin-right: 1px;
+            box-shadow: 0 3px 5px rgba(0,0,0,0.25), inset 0 -3px 3px rgba(255,255,255,0.6);
             z-index: 1;
         }
+        .white-key:last-child { margin-right: 0; }
         .black-key {
+            width: 24px;
+            height: 60%; /* 흰 건반 높이의 60% */
+            background: linear-gradient(to bottom, #444, #222);
+            border: 1px solid #111;
+            border-bottom: 5px solid #333;
+            border-radius: 0 0 4px 4px;
             position: absolute;
             z-index: 2;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 -2px 2px rgba(120,120,120,0.4);
         }
         .white-key.active {
+            background: linear-gradient(to bottom, #e0e0e0, #cccccc);
+            transform: translateY(3px);
             border-bottom-width: 3px;
+            box-shadow: 0 0 25px 7px var(--key-glow-color, rgba(135, 206, 250, 0.9)), /* 하늘색 빛 */
+                        inset 0 -1px 1px rgba(255,255,255,0.4);
         }
         .black-key.active {
+            background: linear-gradient(to bottom, #333, #111);
             transform: translateY(2px);
             border-bottom-width: 3px;
+            box-shadow: 0 0 25px 7px var(--key-glow-color, rgba(135, 206, 250, 0.9)), /* 하늘색 빛 */
+                        inset 0 -1px 1px rgba(100,100,100,0.2);
         }
         .key-label {
             position: absolute;
+            bottom: 8px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 10px;
+            color: #666;
+            pointer-events: none; /* 라벨이 터치 이벤트 방해하지 않도록 */
+        }
+        .black-key .key-label { color: #bbb; font-size: 9px; }
+        #note-fall-area {
+            width: 100%;
+            height: calc(100vh - 30vh - 30px); /* 피아노 높이, 바닥 여백 제외 */
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%); /* 중앙 정렬 */
+            /* background-color: rgba(20,20,20,0.5); */ /* 개발 시 영역 확인용 */
+            pointer-events: none; /* 노트가 마우스/터치 이벤트 가로채지 않도록 */
+        }
+        .note-bar {
+            position: absolute;
+            box-sizing: border-box;
+            border-radius: 3px;
+            opacity: 0.9;
+            background: linear-gradient(to bottom, var(--note-color-start, #00ff00), var(--note-color-end, #008800));
+            box-shadow: 0 0 10px var(--note-color-start, #00ff00);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+        #hit-line {
+            position: absolute;
+            bottom: calc(30vh + 10px); /* 피아노 컨테이너 하단에 맞춤 */
             left: 50%;
             transform: translateX(-50%);
+            width: 95vw; /* 피아노 컨테이너 너비와 유사하게 */
+            max-width: 1400px;
+            height: 4px;
+            background: linear-gradient(to right, transparent, rgba(255,255,255,0.7), transparent);
+            border-radius: 2px;
+            z-index: 3;
+            box-shadow: 0 0 15px rgba(200, 200, 255, 0.6);
+        }
+        .particle {
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            background-color: var(--particle-color, white);
+            border-radius: 50%;
+            opacity: 1;
+            pointer-events: none;
+            animation: fadeOutAndRise 0.5s ease-out forwards;
         }
+        @keyframes fadeOutAndRise {
+            to {
+                transform: translateY(-30px) scale(0.5);
+                opacity: 0;
+            }
         }
+        #controls {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            z-index: 10;
+        }
+        #controls button {
+            padding: 8px 12px;
+            font-size: 14px;
+            cursor: pointer;
+            background-color: #333;
+            color: white;
+            border: 1px solid #555;
+            border-radius: 4px;
+        }
+        #controls button:hover {
+            background-color: #555;
         }
     </style>
 </head>
 <body>
+    <div id="note-fall-area"></div>
+    <div id="hit-line"></div>
+    <div class="piano-container">
         <div class="piano" id="piano">
+            <!-- 건반은 JavaScript로 생성 -->
         </div>
     </div>
+    <div id="controls">
+        <button id="playButton">Play Sample</button>
+    </div>
     <script>
+        const pianoElement = document.getElementById('piano');
+        const noteFallArea = document.getElementById('note-fall-area');
+        const playButton = document.getElementById('playButton');
+        // 피아노 Synth 초기화 (Tone.js)
+        const synth = new Tone.PolySynth(Tone.Synth, {
+            oscillator: { type: "sine" }, // 기본 사인파, 좀 더 피아노처럼 하려면 'triangle8' 등도 고려
+            envelope: {
+                attack: 0.005,
+                decay: 0.1,
+                sustain: 0.3,
+                release: 1
+            },
+            volume: -6 // 볼륨 조절
+        }).toDestination();
+        const whiteKeyNotes = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
+        const blackKeyNotes = ['C#', 'D#', 'F#', 'G#', 'A#'];
+        const notesWithSharps = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+        const baseOctave = 2; // 시작 옥타브
+        const numOctaves = 4; // 표시할 옥타브 수
+        let totalWhiteKeys = 0;
+        // 건반 생성
+        for (let octave = baseOctave; octave < baseOctave + numOctaves; octave++) {
+            notesWithSharps.forEach((noteName, index) => {
+                const keyElement = document.createElement('div');
+                keyElement.classList.add('key');
+                const fullNoteName = noteName + octave;
+                keyElement.dataset.note = fullNoteName;
+                // const labelElement = document.createElement('span');
+                // labelElement.classList.add('key-label');
+                // labelElement.textContent = noteName.length === 1 ? noteName : noteName.charAt(0); // C# -> C
+                // keyElement.appendChild(labelElement);
+                if (noteName.includes('#')) { // 검은 건반
+                    keyElement.classList.add('black-key');
+                    // 검은 건반 위치 계산: (이전 흰 건반 개수 * 흰 건반 너비) + 오프셋
+                    // C#은 C 뒤, D#은 D 뒤...
+                    let offsetMultiplier = totalWhiteKeys - 0.35; // 검은 건반을 흰 건반 사이에 위치시키기 위한 조정값
+                    keyElement.style.left = (offsetMultiplier * 41) + 'px'; // 40(너비) + 1(마진)
+                    keyElement.style.top = '0px';
+                } else { // 흰 건반
+                    keyElement.classList.add('white-key');
+                    totalWhiteKeys++;
+                }
+                pianoElement.appendChild(keyElement);
+                // 이벤트 리스너
+                const playNoteHandler = (event) => {
+                    if (event.type === 'touchstart') event.preventDefault();
+                    keyElement.classList.add('active');
+                    const randomHue = Math.random() * 360;
+                    keyElement.style.setProperty('--key-glow-color', `hsla(${randomHue}, 100%, 70%, 0.9)`);
+                    synth.triggerAttackRelease(fullNoteName, "8n"); // "8n"은 8분음표 길이
+                    createParticles(keyElement, `hsla(${randomHue}, 100%, 70%, 0.9)`);
+                };
+                const stopNoteHandler = (event) => {
+                    if (event.type === 'touchend') event.preventDefault();
+                    keyElement.classList.remove('active');
+                };
+                keyElement.addEventListener('mousedown', playNoteHandler);
+                keyElement.addEventListener('mouseup', stopNoteHandler);
+                keyElement.addEventListener('mouseleave', stopNoteHandler);
+                keyElement.addEventListener('touchstart', playNoteHandler, { passive: false });
+                keyElement.addEventListener('touchend', stopNoteHandler);
+                keyElement.addEventListener('touchcancel', stopNoteHandler);
+            });
+        }
+        // 마지막 C 건반 추가
+        const lastCOctave = baseOctave + numOctaves;
+        const lastCKey = document.createElement('div');
+        lastCKey.classList.add('key', 'white-key');
+        lastCKey.dataset.note = 'C' + lastCOctave;
+        // const lastCLabel = document.createElement('span');
+        // lastCLabel.classList.add('key-label');
+        // lastCLabel.textContent = 'C';
+        // lastCKey.appendChild(lastCLabel);
+        pianoElement.appendChild(lastCKey);
+        const lastCNoteName = 'C' + lastCOctave;
+         lastCKey.addEventListener('mousedown', (e) => { e.preventDefault(); lastCKey.classList.add('active'); synth.triggerAttackRelease(lastCNoteName, "8n"); createParticles(lastCKey); });
+        lastCKey.addEventListener('mouseup', (e) => { e.preventDefault(); lastCKey.classList.remove('active'); });
+        lastCKey.addEventListener('mouseleave', () => lastCKey.classList.remove('active'));
+        lastCKey.addEventListener('touchstart', (e) => { e.preventDefault(); lastCKey.classList.add('active'); synth.triggerAttackRelease(lastCNoteName, "8n"); createParticles(lastCKey);}, { passive: false });
+        lastCKey.addEventListener('touchend', (e) => { e.preventDefault(); lastCKey.classList.remove('active'); });
+        lastCKey.addEventListener('touchcancel', () => lastCKey.classList.remove('active'));
+        // 파티클 생성 함수
+        function createParticles(keyElement, color = 'white') {
+            const rect = keyElement.getBoundingClientRect();
+            const pianoRect = pianoElement.getBoundingClientRect();
+            for (let i = 0; i < 10; i++) { // 10개의 파티클 생성
+                const particle = document.createElement('div');
+                particle.classList.add('particle');
+                particle.style.setProperty('--particle-color', color);
+                // 피아노 컨테이너 내의 상대적 위치로 설정
+                particle.style.left = (rect.left - pianoRect.left + rect.width / 2 + (Math.random() - 0.5) * 20) + 'px';
+                particle.style.bottom = (pianoRect.height - (rect.top - pianoRect.top) - rect.height / 2) + 'px'; // Y축 반전하여 bottom 기준으로 설정
+                noteFallArea.appendChild(particle);
+                setTimeout(() => {
+                    particle.remove();
+                }, 500); // 애니메이션 시간과 동일하게 설정
+            }
+        }
+        // --- 노트 떨어지는 효과 ---
+        const hitLineY = noteFallArea.offsetHeight; // 판정선 위치 (노트 떨어지는 영역의 바닥)
+        const fallDurationSeconds = 2; // 노트가 떨어지는 데 걸리는 시간 (초)
+        // 샘플 악보 데이터: { time: 시작시간(초), note: 음이름, duration: 길이(초), color: [r,g,b] }
+        const sampleSong = [
+            { time: 0, note: 'C4', duration: 0.4, color: [0, 255, 0] },
+            { time: 0.5, note: 'C4', duration: 0.4, color: [0, 255, 0] },
+            { time: 1, note: 'G4', duration: 0.4, color: [255, 255, 0] },
+            { time: 1.5, note: 'G4', duration: 0.4, color: [255, 255, 0] },
+            { time: 2, note: 'A4', duration: 0.4, color: [255, 0, 255] },
+            { time: 2.5, note: 'A4', duration: 0.4, color: [255, 0, 255] },
+            { time: 3, note: 'G4', duration: 0.8, color: [255, 255, 0] },
+            { time: 4, note: 'F4', duration: 0.4, color: [0, 255, 255] },
+            { time: 4.5, note: 'F4', duration: 0.4, color: [0, 255, 255] },
+            { time: 5, note: 'E4', duration: 0.4, color: [255, 165, 0] },
+            { time: 5.5, note: 'E4', duration: 0.4, color: [255, 165, 0] },
+            { time: 6, note: 'D4', duration: 0.4, color: [0, 0, 255] },
+            { time: 6.5, note: 'D4', duration: 0.4, color: [0, 0, 255] },
+            { time: 7, note: 'C4', duration: 0.8, color: [0, 255, 0] },
         ];
+        function playSampleSong() {
+            if (Tone.Transport.state === 'started') {
+                Tone.Transport.stop();
+                // 이미 생성된 노트들 제거
+                document.querySelectorAll('.note-bar').forEach(n => n.remove());
+                playButton.textContent = 'Play Sample';
+                return;
             }
+            playButton.textContent = 'Stop';
+            Tone.Transport.bpm.value = 100; // 곡의 BPM 설정
+            sampleSong.forEach(noteData => {
+                Tone.Transport.scheduleOnce(time => {
+                    // 노트 바 생성
+                    const noteElement = document.createElement('div');
+                    noteElement.classList.add('note-bar');
+                    const targetKeyElement = pianoElement.querySelector(`.key[data-note="${noteData.note}"]`);
+                    if (targetKeyElement) {
+                        const keyRect = targetKeyElement.getBoundingClientRect();
+                        const pianoRect = pianoElement.getBoundingClientRect();
+                        noteElement.style.width = keyRect.width - 2 + 'px'; // -2 for border
+                        noteElement.style.left = (keyRect.left - pianoRect.left + 1) + 'px';
+                        noteElement.style.height = (noteData.duration * 100) + 'px'; // 길이에 따라 높이 조절 (임의의 비율)
+                        // 색상 설정
+                        const [r, g, b] = noteData.color;
+                        noteElement.style.setProperty('--note-color-start', `rgba(${r}, ${g}, ${b}, 0.9)`);
+                        noteElement.style.setProperty('--note-color-end', `rgba(${r*0.7}, ${g*0.7}, ${b*0.7}, 0.9)`);
+                        noteElement.style.top = `-${noteElement.style.height}`; // 화면 위에서 시작
+                        noteFallArea.appendChild(noteElement);
+                        // 애니메이션
+                        noteElement.animate([
+                            { transform: `translateY(0px)` }, // 시작 위치 (CSS에서 top: -height로 설정했으므로 Y는 0부터 시작)
+                            { transform: `translateY(${hitLineY + parseFloat(noteElement.style.height)}px)` } // 판정선 아래로 완전히 지나가도록
+                        ], {
+                            duration: fallDurationSeconds * 1000,
+                            easing: 'linear'
+                        });
+                        // 판정 시점에 소리 재생 및 효과
+                        Tone.Transport.scheduleOnce(hitTime => {
+                            synth.triggerAttackRelease(noteData.note, noteData.duration, hitTime);
+                            targetKeyElement.classList.add('active');
+                            targetKeyElement.style.setProperty('--key-glow-color', `rgba(${r}, ${g}, ${b}, 0.9)`);
+                            createParticles(targetKeyElement, `rgba(${r}, ${g}, ${b}, 0.9)`);
+                            // 노트 제거 및 건반 비활성화 타이머
+                            setTimeout(() => {
+                                targetKeyElement.classList.remove('active');
+                            }, noteData.duration * 1000 * (60 / Tone.Transport.bpm.value)); // BPM 고려
+                            // 노트 바 제거 (애니메이션 끝난 후)
+                            setTimeout(() => {
+                                if (noteElement.parentNode) {
+                                    noteElement.remove();
+                                }
+                            }, fallDurationSeconds * 1000);
+                        }, time + fallDurationSeconds); // 노트가 떨어지는 시간만큼 뒤에 소리 재생
+                    }
+                }, noteData.time);
+            });
+            Tone.Transport.start();
+        }
+        playButton.addEventListener('click', () => {
+            Tone.start(); // 사용자 인터랙션 후 오디오 컨텍스트 시작
+            playSampleSong();
         });
     </script>