Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Teclado Musical com MIDI</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .key { | |
| transition: all 0.1s ease; | |
| user-select: none; | |
| } | |
| .white-key { | |
| background-color: white; | |
| border: 1px solid #ccc; | |
| z-index: 1; | |
| } | |
| .black-key { | |
| background-color: black; | |
| z-index: 2; | |
| margin-left: -15px; | |
| margin-right: -15px; | |
| height: 60%; | |
| } | |
| .white-key.active { | |
| background-color: #ddd; | |
| box-shadow: inset 0 0 10px rgba(0,0,0,0.3); | |
| } | |
| .black-key.active { | |
| background-color: #555; | |
| box-shadow: inset 0 0 10px rgba(255,255,255,0.2); | |
| } | |
| .key-label { | |
| pointer-events: none; | |
| } | |
| .keyboard-container { | |
| perspective: 1000px; | |
| } | |
| .keyboard { | |
| transform-style: preserve-3d; | |
| transform: rotateX(10deg); | |
| } | |
| .midi-indicator { | |
| animation: pulse 0.5s; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen flex flex-col"> | |
| <div class="container mx-auto px-4 py-8 flex-grow"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold mb-2">Teclado Musical MIDI</h1> | |
| <p class="text-gray-400">Toque no teclado virtual ou conecte um controlador MIDI físico</p> | |
| </header> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <div class="lg:w-1/4 bg-gray-800 p-6 rounded-lg"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Configurações | |
| </h2> | |
| <div class="mb-6"> | |
| <label class="block text-gray-400 mb-2">Dispositivo MIDI:</label> | |
| <select id="midi-input" class="w-full bg-gray-700 text-white p-2 rounded"> | |
| <option value="">Nenhum selecionado</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-400 mb-2">Oitavas:</label> | |
| <input type="range" id="octave-range" min="1" max="6" value="3" class="w-full"> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>1</span> | |
| <span id="octave-value">3</span> | |
| <span>6</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-400 mb-2">Instrumento:</label> | |
| <select id="instrument-select" class="w-full bg-gray-700 text-white p-2 rounded"> | |
| <option value="piano">Piano</option> | |
| <option value="synth">Sintetizador</option> | |
| <option value="organ">Órgão</option> | |
| <option value="guitar">Guitarra</option> | |
| <option value="strings">Cordas</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-400 mb-2">Volume:</label> | |
| <input type="range" id="volume-range" min="0" max="100" value="70" class="w-full"> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>0</span> | |
| <span id="volume-value">70</span> | |
| <span>100</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-6"> | |
| <input type="checkbox" id="show-labels" class="mr-2" checked> | |
| <label for="show-labels" class="text-gray-400">Mostrar notas</label> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h3 class="font-medium mb-2 flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i> Status MIDI | |
| </h3> | |
| <div class="flex items-center"> | |
| <div id="midi-status" class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <span id="midi-status-text">Desconectado</span> | |
| </div> | |
| <div id="midi-activity" class="mt-2 hidden"> | |
| <div class="flex items-center mb-1"> | |
| <div id="midi-indicator" class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span>Atividade MIDI</span> | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| Nota: <span id="current-note">-</span> | | |
| Velocidade: <span id="current-velocity">-</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-3/4"> | |
| <div class="keyboard-container mb-8"> | |
| <div class="keyboard bg-gray-800 p-6 rounded-lg"> | |
| <div class="flex relative" id="keyboard"> | |
| <!-- Teclas serão geradas pelo JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-6 rounded-lg"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-chart-bar mr-2"></i> Visualização MIDI | |
| </h2> | |
| <div class="h-40 bg-gray-900 rounded relative overflow-hidden"> | |
| <div id="midi-visualizer" class="absolute inset-0"> | |
| <!-- Ondas serão geradas pelo JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-gray-800 py-4 text-center text-gray-400 text-sm"> | |
| <p>Teclado Musical MIDI - Pressione as teclas do teclado físico ou clique nas teclas virtuais</p> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', async () => { | |
| // Configuração inicial | |
| const audioContext = new (window.AudioContext || window.webkitAudioContext)(); | |
| let activeOscillators = {}; | |
| let currentInstrument = 'piano'; | |
| let volume = 0.7; | |
| let octave = 3; | |
| let showLabels = true; | |
| // Elementos do DOM | |
| const keyboardEl = document.getElementById('keyboard'); | |
| const midiInputSelect = document.getElementById('midi-input'); | |
| const octaveRange = document.getElementById('octave-range'); | |
| const octaveValue = document.getElementById('octave-value'); | |
| const instrumentSelect = document.getElementById('instrument-select'); | |
| const volumeRange = document.getElementById('volume-range'); | |
| const volumeValue = document.getElementById('volume-value'); | |
| const showLabelsCheckbox = document.getElementById('show-labels'); | |
| const midiStatus = document.getElementById('midi-status'); | |
| const midiStatusText = document.getElementById('midi-status-text'); | |
| const midiActivity = document.getElementById('midi-activity'); | |
| const currentNote = document.getElementById('current-note'); | |
| const currentVelocity = document.getElementById('current-velocity'); | |
| const midiVisualizer = document.getElementById('midi-visualizer'); | |
| // Notas musicais | |
| const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']; | |
| const whiteKeys = ['C', 'D', 'E', 'F', 'G', 'A', 'B']; | |
| const blackKeys = ['C#', 'D#', 'F#', 'G#', 'A#']; | |
| // Inicializa o teclado | |
| function initKeyboard() { | |
| keyboardEl.innerHTML = ''; | |
| // Cria 2 oitavas de teclas (14 teclas brancas) | |
| for (let i = 0; i < 14; i++) { | |
| const noteIndex = i % 7; | |
| const noteName = whiteKeys[noteIndex]; | |
| const isSharp = false; | |
| createKey(noteName, isSharp, i); | |
| // Adiciona teclas pretas entre as brancas apropriadas | |
| if (noteName !== 'E' && noteName !== 'B' && i < 13) { | |
| const nextNoteIndex = (i + 1) % 7; | |
| const nextNoteName = whiteKeys[nextNoteIndex]; | |
| if (blackKeys.includes(noteName + '#')) { | |
| createKey(noteName + '#', true, i); | |
| } | |
| } | |
| } | |
| } | |
| // Cria uma tecla individual | |
| function createKey(noteName, isSharp, position) { | |
| const key = document.createElement('div'); | |
| const keyClass = isSharp ? 'black-key' : 'white-key'; | |
| const width = isSharp ? 'w-8' : 'w-16'; | |
| const label = showLabels ? `<span class="key-label absolute bottom-2 text-xs ${isSharp ? 'text-white' : 'text-gray-700'}">${noteName}${octave + Math.floor(position/7)}</span>` : ''; | |
| key.className = `key ${keyClass} ${width} h-32 relative cursor-pointer flex items-end justify-center`; | |
| key.innerHTML = label; | |
| key.dataset.note = noteName; | |
| key.dataset.octave = octave + Math.floor(position/7); | |
| // Eventos de toque/clique | |
| key.addEventListener('mousedown', () => playNote(noteName, octave + Math.floor(position/7), 100)); | |
| key.addEventListener('mouseup', () => stopNote(noteName, octave + Math.floor(position/7))); | |
| key.addEventListener('mouseleave', () => stopNote(noteName, octave + Math.floor(position/7))); | |
| keyboardEl.appendChild(key); | |
| } | |
| // Toca uma nota | |
| function playNote(note, octave, velocity) { | |
| const fullNote = `${note}${octave}`; | |
| if (activeOscillators[fullNote]) return; | |
| const freq = getNoteFrequency(note, octave); | |
| const osc = audioContext.createOscillator(); | |
| const gainNode = audioContext.createGain(); | |
| // Configura o oscilador baseado no instrumento selecionado | |
| configureOscillator(osc, gainNode); | |
| gainNode.gain.value = volume * (velocity / 127); | |
| osc.frequency.value = freq; | |
| osc.connect(gainNode); | |
| gainNode.connect(audioContext.destination); | |
| osc.start(); | |
| activeOscillators[fullNote] = { oscillator: osc, gainNode: gainNode }; | |
| // Atualiza a interface | |
| highlightKey(note, octave, true); | |
| updateMidiVisualizer(freq, velocity); | |
| // Atualiza o status MIDI | |
| currentNote.textContent = `${note}${octave}`; | |
| currentVelocity.textContent = velocity; | |
| document.getElementById('midi-indicator').classList.add('midi-indicator'); | |
| setTimeout(() => { | |
| document.getElementById('midi-indicator').classList.remove('midi-indicator'); | |
| }, 500); | |
| } | |
| // Para uma nota | |
| function stopNote(note, octave) { | |
| const fullNote = `${note}${octave}`; | |
| if (!activeOscillators[fullNote]) return; | |
| // Adiciona um pequeno release para evitar clicks | |
| activeOscillators[fullNote].gainNode.gain.setValueAtTime( | |
| activeOscillators[fullNote].gainNode.gain.value, | |
| audioContext.currentTime | |
| ); | |
| activeOscillators[fullNote].gainNode.gain.exponentialRampToValueAtTime( | |
| 0.0001, | |
| audioContext.currentTime + 0.03 | |
| ); | |
| setTimeout(() => { | |
| activeOscillators[fullNote].oscillator.stop(); | |
| delete activeOscillators[fullNote]; | |
| }, 30); | |
| highlightKey(note, octave, false); | |
| } | |
| // Configura o oscilador baseado no instrumento selecionado | |
| function configureOscillator(osc, gainNode) { | |
| switch(currentInstrument) { | |
| case 'piano': | |
| osc.type = 'sine'; | |
| // Simula o ataque rápido e decay do piano | |
| gainNode.gain.setValueAtTime(0, audioContext.currentTime); | |
| gainNode.gain.linearRampToValueAtTime(volume, audioContext.currentTime + 0.01); | |
| gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 1); | |
| break; | |
| case 'synth': | |
| osc.type = 'sawtooth'; | |
| // Filtro para suavizar o som | |
| const filter = audioContext.createBiquadFilter(); | |
| filter.type = 'lowpass'; | |
| filter.frequency.value = 2000; | |
| osc.connect(filter); | |
| filter.connect(gainNode); | |
| break; | |
| case 'organ': | |
| osc.type = 'sine'; | |
| // Adiciona harmônicos para simular órgão | |
| const osc2 = audioContext.createOscillator(); | |
| osc2.type = 'square'; | |
| osc2.frequency.value = osc.frequency.value * 2; | |
| osc2.connect(gainNode); | |
| osc2.start(); | |
| activeOscillators[`${note}${octave}-organ`] = { oscillator: osc2, gainNode: gainNode }; | |
| break; | |
| case 'guitar': | |
| osc.type = 'sine'; | |
| // Simula o sustain da guitarra | |
| gainNode.gain.setValueAtTime(0, audioContext.currentTime); | |
| gainNode.gain.linearRampToValueAtTime(volume, audioContext.currentTime + 0.1); | |
| gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 1.5); | |
| break; | |
| case 'strings': | |
| osc.type = 'sine'; | |
| // Simula o ataque lento das cordas | |
| gainNode.gain.setValueAtTime(0, audioContext.currentTime); | |
| gainNode.gain.linearRampToValueAtTime(volume, audioContext.currentTime + 0.5); | |
| gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 3); | |
| break; | |
| default: | |
| osc.type = 'sine'; | |
| } | |
| } | |
| // Destaca a tecla quando pressionada | |
| function highlightKey(note, octave, isActive) { | |
| const keys = document.querySelectorAll('.key'); | |
| keys.forEach(key => { | |
| if (key.dataset.note === note && parseInt(key.dataset.octave) === octave) { | |
| if (isActive) { | |
| key.classList.add('active'); | |
| } else { | |
| key.classList.remove('active'); | |
| } | |
| } | |
| }); | |
| } | |
| // Atualiza o visualizador MIDI | |
| function updateMidiVisualizer(frequency, velocity) { | |
| // Limpa o visualizador | |
| midiVisualizer.innerHTML = ''; | |
| // Cria elementos de onda baseados na frequência e velocidade | |
| const waveCount = Math.floor(frequency / 100); | |
| const waveHeight = (velocity / 127) * 100; | |
| for (let i = 0; i < waveCount; i++) { | |
| const wave = document.createElement('div'); | |
| wave.className = 'absolute bg-blue-500 opacity-50 rounded-full'; | |
| // Posiciona e dimensiona a onda | |
| const left = Math.random() * 100; | |
| const width = 2 + Math.random() * 8; | |
| const height = waveHeight * (0.5 + Math.random() * 0.5); | |
| const top = 50 - (height / 2) + (Math.random() * 20 - 10); | |
| wave.style.left = `${left}%`; | |
| wave.style.top = `${top}%`; | |
| wave.style.width = `${width}px`; | |
| wave.style.height = `${height}px`; | |
| midiVisualizer.appendChild(wave); | |
| // Anima a onda | |
| wave.animate([ | |
| { transform: 'scale(1)', opacity: 0.5 }, | |
| { transform: 'scale(1.5)', opacity: 0 } | |
| ], { | |
| duration: 1000, | |
| easing: 'ease-out' | |
| }); | |
| } | |
| } | |
| // Obtém a frequência de uma nota | |
| function getNoteFrequency(note, octave) { | |
| const A4 = 440; | |
| let n; | |
| if (note.length === 1) { | |
| n = (octave - 4) * 12 + notes.indexOf(note); | |
| } else { | |
| n = (octave - 4) * 12 + notes.indexOf(note); | |
| } | |
| return A4 * Math.pow(2, n / 12); | |
| } | |
| // Configuração MIDI | |
| async function setupMidi() { | |
| try { | |
| const midiAccess = await navigator.requestMIDIAccess(); | |
| updateMidiDevices(midiAccess); | |
| midiAccess.onstatechange = () => updateMidiDevices(midiAccess); | |
| midiStatus.classList.remove('bg-red-500'); | |
| midiStatus.classList.add('bg-green-500'); | |
| midiStatusText.textContent = 'MIDI disponível'; | |
| midiActivity.classList.remove('hidden'); | |
| } catch (error) { | |
| console.error('Erro ao acessar MIDI:', error); | |
| midiStatusText.textContent = 'MIDI não suportado'; | |
| } | |
| } | |
| // Atualiza a lista de dispositivos MIDI | |
| function updateMidiDevices(midiAccess) { | |
| midiInputSelect.innerHTML = '<option value="">Nenhum selecionado</option>'; | |
| const inputs = midiAccess.inputs.values(); | |
| for (let input = inputs.next(); !input.done; input = inputs.next()) { | |
| const option = document.createElement('option'); | |
| option.value = input.value.id; | |
| option.textContent = input.value.name; | |
| midiInputSelect.appendChild(option); | |
| // Remove listeners antigos | |
| input.value.onmidimessage = null; | |
| // Adiciona novo listener se selecionado | |
| if (midiInputSelect.value === input.value.id) { | |
| input.value.onmidimessage = handleMidiMessage; | |
| } | |
| } | |
| } | |
| // Manipula mensagens MIDI | |
| function handleMidiMessage(message) { | |
| const [command, note, velocity] = message.data; | |
| const action = command >> 4; | |
| const channel = command & 0xf; | |
| // Note on (144) ou Note off (128) | |
| if (action === 0x9 || action === 0x8) { | |
| const noteName = notes[note % 12]; | |
| const noteOctave = Math.floor(note / 12) - 1; | |
| if (action === 0x9 && velocity > 0) { | |
| playNote(noteName, noteOctave, velocity); | |
| } else { | |
| stopNote(noteName, noteOctave); | |
| } | |
| } | |
| } | |
| // Event listeners | |
| octaveRange.addEventListener('input', () => { | |
| octave = parseInt(octaveRange.value); | |
| octaveValue.textContent = octave; | |
| initKeyboard(); | |
| }); | |
| instrumentSelect.addEventListener('change', () => { | |
| currentInstrument = instrumentSelect.value; | |
| }); | |
| volumeRange.addEventListener('input', () => { | |
| volume = parseInt(volumeRange.value) / 100; | |
| volumeValue.textContent = volumeRange.value; | |
| }); | |
| showLabelsCheckbox.addEventListener('change', () => { | |
| showLabels = showLabelsCheckbox.checked; | |
| initKeyboard(); | |
| }); | |
| midiInputSelect.addEventListener('change', () => { | |
| navigator.requestMIDIAccess().then(midiAccess => { | |
| const inputs = midiAccess.inputs.values(); | |
| for (let input = inputs.next(); !input.done; input = inputs.next()) { | |
| input.value.onmidimessage = null; | |
| if (input.value.id === midiInputSelect.value) { | |
| input.value.onmidimessage = handleMidiMessage; | |
| } | |
| } | |
| }); | |
| }); | |
| // Eventos de teclado físico | |
| document.addEventListener('keydown', (e) => { | |
| const keyMap = { | |
| 'a': 'C', 'w': 'C#', 's': 'D', 'e': 'D#', 'd': 'E', | |
| 'f': 'F', 't': 'F#', 'g': 'G', 'y': 'G#', 'h': 'A', | |
| 'u': 'A#', 'j': 'B', 'k': 'C', 'o': 'C#', 'l': 'D' | |
| }; | |
| if (keyMap[e.key.toLowerCase()]) { | |
| playNote(keyMap[e.key.toLowerCase()], octave, 100); | |
| } | |
| }); | |
| document.addEventListener('keyup', (e) => { | |
| const keyMap = { | |
| 'a': 'C', 'w': 'C#', 's': 'D', 'e': 'D#', 'd': 'E', | |
| 'f': 'F', 't': 'F#', 'g': 'G', 'y': 'G#', 'h': 'A', | |
| 'u': 'A#', 'j': 'B', 'k': 'C', 'o': 'C#', 'l': 'D' | |
| }; | |
| if (keyMap[e.key.toLowerCase()]) { | |
| stopNote(keyMap[e.key.toLowerCase()], octave); | |
| } | |
| }); | |
| // Inicializa o aplicativo | |
| initKeyboard(); | |
| setupMidi(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mugnatto/midi-keyboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |