Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
| <title>Improved Piano Visualizer</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/MidiConvert.min.js"></script> | |
| <style> | |
| :root { | |
| --bg-color: #080808; | |
| --piano-bg-start: #1c1c1c; | |
| --piano-bg-end: #0d0d0d; | |
| --piano-border: #2f2f2f; | |
| --white-key-bg-start: #fdfdfd; | |
| --white-key-bg-end: #e4e4e4; | |
| --white-key-border: #9e9e9e; | |
| --black-key-bg-start: #353535; | |
| --black-key-bg-end: #181818; | |
| --black-key-border: #050505; | |
| --hit-line-color: rgba(255, 80, 180, 0.85); | |
| --key-active-glow: rgba(255, 80, 180, 0.9); | |
| --particle-base-color-h: 320; | |
| --default-note-color-h: 180; | |
| } | |
| body { | |
| margin: 0; | |
| height: 100vh; | |
| background-color: var(--bg-color); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| align-items: center; | |
| overflow: hidden; | |
| font-family: 'Arial', sans-serif; | |
| } | |
| #controls { | |
| position: absolute; | |
| top: 15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 100; | |
| background-color: rgba(30, 30, 30, 0.88); | |
| padding: 10px 15px; | |
| border-radius: 7px; | |
| box-shadow: 0 2px 7px rgba(0,0,0,0.4); | |
| display: flex; | |
| align-items: center; | |
| } | |
| #controls input[type="text"] { | |
| padding: 9px 12px; | |
| margin-right: 8px; | |
| border: 1px solid #484848; | |
| background-color: #252525; | |
| color: #f0f0f0; | |
| border-radius: 4px; | |
| width: 320px; | |
| font-size: 14px; | |
| } | |
| #controls button { | |
| padding: 9px 16px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| background-color: #5cb85c; | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| transition: background-color 0.2s, box-shadow 0.2s; | |
| box-shadow: 0 2px 3px rgba(0,0,0,0.25); | |
| } | |
| #controls button:hover { | |
| background-color: #4cae4c; | |
| box-shadow: 0 3px 5px rgba(0,0,0,0.3); | |
| } | |
| #controls button:disabled { | |
| background-color: #484848; | |
| cursor: not-allowed; | |
| box-shadow: none; | |
| } | |
| #loading-indicator { | |
| color: #c8c8c8; | |
| font-size: 13px; | |
| margin-left: 12px; | |
| display: none; | |
| } | |
| .piano-container { | |
| width: 98vw; | |
| max-width: 1500px; | |
| height: 28vh; | |
| min-height: 190px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: flex-end; | |
| position: relative; | |
| padding-bottom: 5px; | |
| } | |
| .piano { | |
| display: flex; | |
| position: relative; | |
| background: linear-gradient(to bottom, var(--piano-bg-start), var(--piano-bg-end)); | |
| padding: 10px 10px 0 10px; | |
| border-radius: 10px 10px 0 0; | |
| box-shadow: 0 0 35px rgba(170, 170, 255, 0.22), | |
| 0 0 55px rgba(255, 170, 220, 0.12); | |
| border: 2px solid var(--piano-border); | |
| border-bottom: none; | |
| height: 100%; | |
| } | |
| .key { | |
| box-sizing: border-box; | |
| cursor: pointer; | |
| user-select: none; | |
| -webkit-tap-highlight-color: transparent; | |
| transition: all 0.035s ease-out; | |
| position: relative; | |
| } | |
| .white-key { | |
| width: 30px; | |
| height: 100%; | |
| background: linear-gradient(to bottom, var(--white-key-bg-start), var(--white-key-bg-end)); | |
| border-left: 1px solid var(--white-key-border); | |
| border-right: 1px solid var(--white-key-border); | |
| border-bottom: 5px solid #909090; | |
| border-radius: 0 0 4px 4px; | |
| box-shadow: 0 2px 3px rgba(0,0,0,0.22), inset 0 -2px 2px rgba(255,255,255,0.68); | |
| z-index: 1; | |
| margin-right: -1px; | |
| } | |
| .white-key:first-child { border-left: 1px solid #686868; } | |
| .white-key:last-child { border-right: 1px solid #686868; margin-right: 0;} | |
| .black-key { | |
| width: 18px; | |
| height: 58%; | |
| background: linear-gradient(to bottom, var(--black-key-bg-start), var(--black-key-bg-end)); | |
| border: 1px solid var(--black-key-border); | |
| border-bottom: 4px solid #181818; | |
| border-radius: 0 0 3px 3px; | |
| position: absolute; | |
| z-index: 5; /* Black keys normally above white keys */ | |
| box-shadow: -1px 0 2px rgba(0,0,0,0.4), 1px 0 2px rgba(0,0,0,0.4), 0 2px 3px rgba(0,0,0,0.55), inset 0 -1px 1px rgba(60,60,60,0.3); | |
| } | |
| .key.active { /* Applied when key is pressed by user or MIDI */ | |
| z-index: 4 ; /* Active keys always on top */ | |
| } | |
| .white-key.active { | |
| background: linear-gradient(to bottom, #d5d5d5, #c2c2c2); | |
| transform: perspective(500px) rotateX(1.2deg) translateY(1.8px); | |
| border-bottom-width: 3.2px; | |
| box-shadow: 0 0 22px 6px var(--key-active-glow), | |
| inset 0 -1px 1px rgba(255,255,255,0.38); | |
| } | |
| .black-key.active { | |
| background: linear-gradient(to bottom, #222222, #020202); | |
| transform: perspective(500px) rotateX(0.6deg) translateY(1.2px); | |
| border-bottom-width: 2.8px; | |
| box-shadow: 0 0 22px 6px var(--key-active-glow), | |
| inset 0 -1px 1px rgba(60,60,60,0.18); | |
| } | |
| #note-fall-area { | |
| width: var(--piano-actual-width, 100%); | |
| height: calc(100vh - 28vh - 5px - 10px); | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| pointer-events: none; | |
| /* border: 1px solid red; */ | |
| } | |
| .note-bar { | |
| position: absolute; | |
| box-sizing: border-box; | |
| border-radius: 3px; | |
| opacity: 0.9; | |
| background: var(--note-gradient); | |
| box-shadow: 0 0 10px var(--note-glow); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| will-change: transform; | |
| } | |
| #hit-line { | |
| position: absolute; | |
| bottom: calc(28vh + 5px); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: var(--piano-actual-width, 98vw); | |
| max-width: 1500px; | |
| height: 3.5px; | |
| background: linear-gradient(to right, transparent, var(--hit-line-color), transparent); | |
| border-radius: 1.75px; | |
| z-index: 3; | |
| box-shadow: 0 0 16px var(--hit-line-color); | |
| } | |
| .particle-container { | |
| position: absolute; | |
| width: var(--piano-actual-width, 100%); | |
| height: calc(28vh + 5px); /* Cover piano keys area and slightly above */ | |
| bottom: 0; /* Align with bottom of the page (below piano-container) */ | |
| left: 50%; | |
| transform: translateX(-50%); | |
| pointer-events: none; | |
| z-index: 5; | |
| /* border: 1px dashed lime; */ | |
| } | |
| .particle { | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| background-color: var(--particle-color); | |
| border-radius: 50%; | |
| opacity: 1; | |
| animation: particleAnim 0.75s cubic-bezier(0.1, 0.9, 0.6, 1) forwards; | |
| will-change: transform, opacity; | |
| } | |
| @keyframes particleAnim { | |
| 0% { transform: translateY(0) translateX(0) scale(1.3); opacity: 0.95; } | |
| 100% { | |
| transform: translateY(calc( (var(--random-y) - 0.7) * -110px - 60px)) | |
| translateX(calc( (var(--random-x) - 0.5) * 75px)) | |
| scale(0.1); | |
| opacity: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="controls"> | |
| <input type="text" id="midiUrlInput" value="https://bitmidi.com/uploads/79829.mid"> | |
| <button id="loadMidiButton">Load & Play MIDI</button> | |
| <span id="loading-indicator">Loading...</span> | |
| </div> | |
| <div id="note-fall-area"></div> | |
| <div class="particle-container" id="particle-container"></div> | |
| <div id="hit-line"></div> | |
| <div class="piano-container"> | |
| <div class="piano" id="piano"></div> | |
| </div> | |
| <script> | |
| const pianoElement = document.getElementById('piano'); | |
| const noteFallArea = document.getElementById('note-fall-area'); | |
| const particleContainer = document.getElementById('particle-container'); | |
| const midiUrlInput = document.getElementById('midiUrlInput'); | |
| const loadMidiButton = document.getElementById('loadMidiButton'); | |
| const loadingIndicator = document.getElementById('loading-indicator'); | |
| const hitLineElement = document.getElementById('hit-line'); | |
| const synth = new Tone.PolySynth(Tone.Synth, { | |
| oscillator: { type: "triangle8" }, | |
| envelope: { attack: 0.015, decay: 0.35, sustain: 0.15, release: 0.9 }, | |
| volume: -10 | |
| }).toDestination(); | |
| const NOTES_ORDER = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']; | |
| const START_OCTAVE = 1; | |
| const END_OCTAVE = 7; | |
| const WHITE_KEY_WIDTH_PX = 30; | |
| const BLACK_KEY_WIDTH_PX = 18; | |
| const NOTE_FALL_DURATION_MS = 3800; | |
| const pianoKeys = {}; | |
| let whiteKeyCount = 0; | |
| let pianoActualWidth = 0; | |
| const keyboardMapping = { | |
| 'a': 'C4', 'w': 'C#4', 's': 'D4', 'e': 'D#4', 'd': 'E4', 'f': 'F4', | |
| 't': 'F#4', 'g': 'G4', 'y': 'G#4', 'h': 'A4', 'u': 'A#4', 'j': 'B4', | |
| 'k': 'C5', 'o': 'C#5', 'l': 'D5', 'p': 'D#5', ';': 'E5', "'": 'F5' | |
| }; | |
| const activeKeyboardKeys = new Set(); | |
| function createPianoKeys() { | |
| pianoElement.innerHTML = ''; | |
| whiteKeyCount = 0; | |
| pianoActualWidth = 0; | |
| for (let octave = START_OCTAVE; octave <= END_OCTAVE; octave++) { | |
| NOTES_ORDER.forEach((noteBase) => { | |
| if (octave === END_OCTAVE && noteBase !== 'C') return; | |
| if (octave === START_OCTAVE && !['A','A#','B'].includes(noteBase)) return; | |
| const keyElement = document.createElement('div'); | |
| keyElement.classList.add('key'); | |
| const noteName = noteBase + octave; | |
| keyElement.dataset.note = noteName; | |
| pianoKeys[noteName] = keyElement; | |
| if (noteBase.includes('#')) { | |
| keyElement.classList.add('black-key'); | |
| keyElement.style.left = (whiteKeyCount * WHITE_KEY_WIDTH_PX) - (BLACK_KEY_WIDTH_PX / 2) -0.5 + 'px'; | |
| keyElement.style.top = '0px'; | |
| } else { | |
| keyElement.classList.add('white-key'); | |
| pianoActualWidth += WHITE_KEY_WIDTH_PX; | |
| whiteKeyCount++; | |
| } | |
| pianoElement.appendChild(keyElement); | |
| const playNote = (e) => { | |
| if(e && e.preventDefault) e.preventDefault(); | |
| if(keyElement.classList.contains('active')) return; | |
| keyElement.classList.add('active'); | |
| const hue = Math.random() * 360; | |
| keyElement.style.setProperty('--key-active-glow', `hsla(${hue}, 100%, 65%, 0.9)`); | |
| synth.triggerAttack(noteName, Tone.now()); | |
| createKeyParticles(keyElement, `hsla(${hue}, 100%, 65%, 0.9)`); | |
| }; | |
| const releaseNote = (e) => { | |
| if(e && e.preventDefault) e.preventDefault(); | |
| keyElement.classList.remove('active'); | |
| synth.triggerRelease(noteName, Tone.now() + 0.05); | |
| }; | |
| keyElement.addEventListener('mousedown', playNote); | |
| keyElement.addEventListener('mouseup', releaseNote); | |
| keyElement.addEventListener('mouseleave', () => { if (keyElement.classList.contains('active')) releaseNote(); }); | |
| keyElement.addEventListener('touchstart', playNote, { passive: false }); | |
| keyElement.addEventListener('touchend', releaseNote); | |
| }); | |
| } | |
| pianoActualWidth += (whiteKeyCount -1) * (-1); | |
| pianoElement.style.width = pianoActualWidth + 'px'; | |
| document.documentElement.style.setProperty('--piano-actual-width', pianoActualWidth + 'px'); | |
| } | |
| createPianoKeys(); | |
| function createKeyParticles(keyElement, color) { | |
| const keyRect = keyElement.getBoundingClientRect(); | |
| const particleContRect = particleContainer.getBoundingClientRect(); | |
| for (let i = 0; i < 15; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| particle.style.setProperty('--particle-color', color); | |
| particle.style.setProperty('--random-x', Math.random()); | |
| particle.style.setProperty('--random-y', Math.random()); | |
| const xPos = (keyRect.left - particleContRect.left) + (keyRect.width / 2); | |
| const yPos = (keyRect.top - particleContRect.top) - 15; // Particles start slightly above the key | |
| particle.style.left = `${xPos}px`; | |
| particle.style.top = `${yPos}px`; | |
| particleContainer.appendChild(particle); | |
| setTimeout(() => particle.remove(), 800); | |
| } | |
| } | |
| let currentMidiEvents = []; | |
| let currentMidiTempo = 120; | |
| async function loadAndPlayMidiFromUrl(url) { | |
| if (Tone.Transport.state === 'started') { | |
| Tone.Transport.stop(); | |
| Tone.Transport.cancel(); | |
| document.querySelectorAll('.note-bar').forEach(n => n.remove()); | |
| loadMidiButton.textContent = 'Load & Play MIDI'; | |
| return; | |
| } | |
| if (!url) { | |
| alert("Please enter a MIDI URL."); | |
| return; | |
| } | |
| loadingIndicator.style.display = 'inline'; | |
| loadMidiButton.disabled = true; | |
| loadMidiButton.textContent = 'Loading...'; | |
| try { | |
| const response = await fetch(url); | |
| if (!response.ok) throw new Error(`Failed to fetch MIDI: ${response.status} ${response.statusText}`); | |
| const arrayBuffer = await response.arrayBuffer(); | |
| const midi = MidiConvert.parse(arrayBuffer); | |
| if (!midi || !midi.tracks || midi.tracks.length === 0) { | |
| throw new Error("Invalid MIDI data or no playable tracks found."); | |
| } | |
| currentMidiTempo = (midi.header && midi.header.tempos && midi.header.tempos[0]) ? midi.header.tempos[0].bpm : 120; | |
| Tone.Transport.bpm.value = currentMidiTempo; | |
| currentMidiEvents = []; | |
| midi.tracks.forEach(track => { | |
| if (track.notes) { | |
| track.notes.forEach(note => { | |
| currentMidiEvents.push({ | |
| time: note.time, | |
| note: Tone.Frequency(note.midi, "midi").toNote(), | |
| duration: note.duration, | |
| velocity: note.velocity | |
| }); | |
| }); | |
| } | |
| }); | |
| currentMidiEvents.sort((a, b) => a.time - b.time); | |
| scheduleMidiEventsVisuals(); | |
| Tone.Transport.start(); | |
| loadMidiButton.textContent = 'Stop MIDI'; | |
| } catch (error) { | |
| console.error("Error loading/parsing MIDI:", error); | |
| alert(`Error: ${error.message}. Please check the URL and ensure it's a valid MIDI file accessible via CORS.`); | |
| loadMidiButton.textContent = 'Load & Play MIDI'; | |
| } finally { | |
| loadingIndicator.style.display = 'none'; | |
| loadMidiButton.disabled = false; | |
| } | |
| } | |
| function scheduleMidiEventsVisuals() { | |
| const noteColors = [ | |
| [30, 144, 255], [255, 20, 147], [50, 205, 50], [255, 165, 0], | |
| [147, 112, 219], [255, 255, 0], [0, 255, 255], [255,0,0] | |
| ]; | |
| let colorIdx = 0; | |
| const fallAreaRect = noteFallArea.getBoundingClientRect(); | |
| const hitLineRect = hitLineElement.getBoundingClientRect(); | |
| const hitLineTopRelativeToFallArea = hitLineRect.top - fallAreaRect.top; | |
| currentMidiEvents.forEach(noteData => { | |
| Tone.Transport.scheduleOnce(time => { | |
| const targetKeyElement = pianoKeys[noteData.note]; | |
| if (!targetKeyElement) return; | |
| const noteElement = document.createElement('div'); | |
| noteElement.classList.add('note-bar'); | |
| const keyRect = targetKeyElement.getBoundingClientRect(); | |
| const keyIsBlack = noteData.note.includes('#'); | |
| noteElement.style.width = ((keyIsBlack ? BLACK_KEY_WIDTH_PX : WHITE_KEY_WIDTH_PX) - (keyIsBlack ? 1 : 2)) + 'px'; | |
| noteElement.style.left = (keyRect.left - fallAreaRect.left + 1) + 'px'; | |
| const noteVisualHeight = Math.max(15, (noteData.duration / (60 / currentMidiTempo)) * 70); | |
| noteElement.style.height = noteVisualHeight + 'px'; | |
| const [r, g, b] = noteColors[colorIdx % noteColors.length]; | |
| colorIdx++; | |
| const noteMainColor = `rgba(${r}, ${g}, ${b}, 0.9)`; | |
| const noteDarkerColor = `rgba(${Math.max(0,r-60)}, ${Math.max(0,g-60)}, ${Math.max(0,b-60)}, 0.9)`; | |
| noteElement.style.setProperty('--note-gradient', `linear-gradient(to bottom, ${noteMainColor}, ${noteDarkerColor})`); | |
| noteElement.style.setProperty('--note-glow', noteMainColor); | |
| noteElement.style.top = `-${noteVisualHeight}px`; | |
| noteFallArea.appendChild(noteElement); | |
| const targetYForNoteTopToHitLine = hitLineTopRelativeToFallArea; // Note's top aligns with hit line's top | |
| const targetYForNoteBottomToPassHitLine = hitLineTopRelativeToFallArea + noteVisualHeight; // Note's bottom passes hit line | |
| const timeToHitLine = NOTE_FALL_DURATION_MS; | |
| const timeAfterHitLine = noteData.duration * 1000; | |
| const totalAnimationDuration = timeToHitLine + timeAfterHitLine; | |
| noteElement.animate([ | |
| { transform: `translateY(0px)` }, // Start from above | |
| { transform: `translateY(${targetYForNoteTopToHitLine}px)`, offset: timeToHitLine / totalAnimationDuration }, // Note's top reaches hit line | |
| { transform: `translateY(${targetYForNoteBottomToPassHitLine}px)` } // Note's bottom passes hit line | |
| ], { | |
| duration: totalAnimationDuration, | |
| easing: 'linear' | |
| }).onfinish = () => { | |
| if (noteElement.parentNode) noteElement.remove(); | |
| }; | |
| Tone.Transport.scheduleOnce(hitTime => { | |
| synth.triggerAttackRelease(noteData.note, noteData.duration, hitTime, noteData.velocity); | |
| if (targetKeyElement) { | |
| targetKeyElement.style.setProperty('--key-active-glow-hue', (colorIdx * 40) % 360); | |
| targetKeyElement.classList.add('active'); | |
| createKeyParticles(targetKeyElement, noteMainColor); | |
| setTimeout(() => { | |
| targetKeyElement.classList.remove('active'); | |
| }, noteData.duration * 1000); | |
| } | |
| }, time + (NOTE_FALL_DURATION_MS / 1000)); | |
| }, noteData.time); | |
| }); | |
| } | |
| loadMidiButton.addEventListener('click', async () => { | |
| await Tone.start(); | |
| const url = midiUrlInput.value.trim(); | |
| loadAndPlayMidiFromUrl(url); | |
| }); | |
| window.addEventListener('keydown', (event) => { | |
| if (event.repeat || midiUrlInput === document.activeElement) return; | |
| const note = keyboardMapping[event.key.toLowerCase()]; | |
| if (note && pianoKeys[note] && !activeKeyboardKeys.has(note)) { | |
| activeKeyboardKeys.add(note); | |
| pianoKeys[note].dispatchEvent(new MouseEvent('mousedown')); | |
| } | |
| }); | |
| window.addEventListener('keyup', (event) => { | |
| const note = keyboardMapping[event.key.toLowerCase()]; | |
| if (note && pianoKeys[note]) { | |
| activeKeyboardKeys.delete(note); | |
| pianoKeys[note].dispatchEvent(new MouseEvent('mouseup')); | |
| } | |
| }); | |
| window.addEventListener('resize', () => { | |
| createPianoKeys(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |