MIDI Drum Recorder 🥁

Um aplicativo web elegante (SPA) desenvolvido com Vanilla JavaScript, desenhado para conectar sua bateria eletrônica (ou teclado MIDI) diretamente ao navegador. O Drum Recorder oferece retorno visual interativo, áudio de altíssima qualidade (utilizando samples acústicos reais) e a capacidade de gravar sua performance e exportá-la perfeitamente para um arquivo .mid.

🌟 Principais Funcionalidades

• Conexão MIDI Plug & Play: Utiliza a Web MIDI API para detectar instantaneamente dispositivos conectados ao seu computador, sem necessidade de drivers complexos.
• Áudio Acústico Realista: Usa o kit AVL Black Pearl (bateria Pearl, pratos Sabian), com 5 camadas de dinâmica por peça: uma batida leve soa diferente de uma forte, não só mais baixa. O chimbal fechado corta o som do aberto, como no instrumento real. Os samples já vêm inclusos na pasta local do projeto.
• Feedback Visual (Visualizer): Um gráfico interativo vetorial (SVG) de uma bateria vista de cima. Cada tambor tocado no seu instrumento brilha instantaneamente na tela, oferecendo acompanhamento visual da sua batida.
• Gravação e Exportação MIDI: Grave seus ritmos com a máxima precisão de tempos e dinâmicas (velocity). Pare a gravação e baixe automaticamente um arquivo Standard MIDI File (.mid) gerado pela biblioteca midi-writer-js, pronto para ser importado na sua DAW favorita (Ableton, Logic, Reaper, etc).
• Modo "Click to Play": Não tem um instrumento MIDI conectado no momento? Você pode clicar diretamente com o mouse nos tambores na tela para testar o som e a funcionalidade.

🛠️ Tecnologias Utilizadas

• HTML5 & CSS3: Design premium, Dark Mode nativo, elementos em Glassmorphism e animações de neon por CSS puro e rápido. Sem dependência de frameworks.
• Vanilla JavaScript (ES Modules): Arquitetura moderna e modular.
• Tone.js: Carrega os samples e os reproduz com baixíssima latência.
• midi-writer-js: Biblioteca usada para compilar a sequência gravada em bytes e formatá-la no padrão MIDI puro para download.

🚀 Como executar o projeto localmente

Como o projeto faz uso de ES Modules (type="module") e precisa carregar arquivos de áudio locais (.mp3), ele precisa ser executado a partir de um servidor web (o navegador bloqueia aberturas diretas pelo protocolo file:// por segurança).

1. Abra o terminal na raiz do projeto (/midi).
2. Inicie um servidor HTTP simples. Exemplos:
   • Se possuir Python: python3 -m http.server 8080
   • Se possuir Node.js: npx serve ou npx http-server -p 8080
   • Se possuir PHP: php -S localhost:8080
3. Abra o seu navegador e acesse http://localhost:8080.
4. Clique no botão Iniciar (necessário para desbloquear o Áudio Context do navegador), conecte sua bateria e divirta-se!

📁 Estrutura de Arquivos

/
├── index.html               # Estrutura principal, carregamento SVG e CDNs
├── css/
│   └── style.css            # Estilização completa e micro-animações (Glows/Neon)
├── sounds/                  # Samples .mp3 do kit AVL Black Pearl (5 camadas por peça)
└── js/
    ├── app.js               # Orquestra os componentes e manipula interações de UI
    ├── audio_engine.js      # Motor de áudio e mapa nota MIDI -> peça
    ├── midi_controller.js   # Interação crua com a Web MIDI API do navegador
    ├── recorder.js          # Capturador de tempos e gerador de arquivos .mid
    └── visualizer.js        # Mapeamento nota -> peça na tela e animações

📝 Notas de Mapeamento

O motor baseia-se no mapeamento de Bateria do General MIDI (Canal 10):

• 36: Bumbo (Kick)
• 38: Caixa (Snare), 40: aro da caixa, 37: side stick
• 42/22: Chimbal Fechado, 44: Chimbal no pedal
• 46/26: Chimbal Aberto
• 48/50: Tom 1
• 45/47: Tom 2
• 43/41: Surdo (Floor Tom)
• 49/55: Prato de Ataque (Crash), 57: segundo crash
• 51/59: Prato de Condução (Ride), 53: cúpula do ride

🙏 Créditos

Samples do kit Black Pearl dos AVL Drumkits, de Glen MacArthur, licenciados sob CC BY-SA 3.0. Os arquivos foram convertidos de FLAC para MP3; o original está em studiorack/avl-drumkits.