尚未偵測到更新。GitHub 發布版本後會顯示在這裡。
個人 GitHub 帳號下公開儲存庫的擁有者可以登入並驗證所有權,自行管理介紹,無需管理員核准。
登入並產生驗證檔案,在 30 分鐘內將其提交至此儲存庫的預設分支。其他分支或分叉儲存庫中的檔案無效。然後在下方檢查檔案,即可無需管理員核准直接管理專案。請保留檔案以維持管理權限。
如需登入,將前往登入頁面。登入後請回到此處,再次點擊所選的驗證按鈕。
在專案資料夾中執行 /nomorevibe verify,即可驗證所有權並自行管理介紹。
一分鐘完成驗證Bateria digital interativa no navegador com 9 pads, atalhos de teclado, sequenciador e controle de BPM.
翻譯準備中
取自儲存庫 README
正在載入完整 README。
檢視完整 README ↗Uma bateria digital interativa que roda diretamente no navegador.
Toque pelos pads da interface ou pelo teclado, combine sons em sequências e ajuste o BPM para criar pequenas batidas sem instalar nada.
A Bateria Digital é um experimento web de interação musical desenvolvido com HTML, CSS e JavaScript puro.
A interface funciona como uma pequena drum machine com 9 pads associados às teclas:
Q W E
A S D
Z X C
Cada tecla dispara um sample de áudio correspondente.
Além da execução livre, o projeto possui um sequenciador simples no qual é possível escrever combinações como:
qwe asd zxc
e reproduzi-las automaticamente de acordo com o BPM selecionado.
prefers-reduced-motionVocê pode tocar de duas formas.
Use:
| Pad | Tecla |
|---|---|
| 01 | Q |
| 02 | W |
| 03 | E |
| 04 | A |
| 05 | S |
| 06 | D |
| 07 | Z |
| 08 | X |
| 09 | C |
Cada tecla reproduz imediatamente o sample associado ao pad.
Clique ou toque diretamente em qualquer um dos nove pads da interface.
O pad recebe feedback visual enquanto o som é disparado. Durante uma sequência, o status também informa o passo atual.
O sequenciador principal possui 16 passos editáveis. Selecione um dos nove pads e clique em qualquer passo para inserir ou substituir aquele som. Clicar novamente em um passo que já contém o som selecionado remove o evento.
O campo Sequenciador rápido permanece disponível como atalho textual e fica sincronizado com o grid.
Exemplo:
qwe asd zxc
Caracteres que não correspondem aos pads são ignorados. Espaço, ponto (.) e hífen (-) representam pausas reais entre os sons.
Ao editar o texto, os primeiros 16 passos do grid são atualizados. Ao editar o grid, o texto é reescrito usando a tecla de cada pad e hífen para pausas. O controle Loop repete a sequência, Parar interrompe sem apagar o texto e Limpar remove apenas o conteúdo do sequenciador.
O estado de trabalho atual é salvo automaticamente no localStorage, incluindo pattern e BPM. A interface também oferece quatro slots locais, A/B/C/D:
O botão Demo carrega um groove de exemplo sem sobrescrever nenhum slot até que o usuário salve explicitamente.
O botão Tap Tempo calcula o BPM a partir do intervalo entre os últimos toques. Após uma pausa longa, a medição reinicia para evitar que um tap antigo distorça o valor.
O controle de Swing trabalha entre 50% e 75%. Em 50%, as semicolcheias ficam retas. Valores maiores atrasam os passos pares de cada par rítmico, criando um groove progressivamente mais deslocado; em torno de 66% o feel se aproxima de uma subdivisão ternária.
O pad selecionado também define o canal exibido no mixer. Cada um dos nove pads mantém estado próprio de:
Quando existe pelo menos um canal em Solo, somente os canais marcados como Solo permanecem audíveis. Mute sempre silencia o canal. Esses estados são persistidos localmente junto do pattern de trabalho.
O controle de velocidade permite escolher valores entre:
70 BPM → 180 BPM
O tempo selecionado altera o intervalo entre os sons reproduzidos pelo sequenciador.
O grid de 16 passos usa subdivisões de semicolcheia, formando um compasso 4/4 completo:
60000 / BPM / 4
Assim, 16 passos correspondem a quatro tempos, e valores maiores de BPM produzem patterns mais rápidos.
O projeto é propositalmente simples e não utiliza frameworks ou processo de build.
bateria-digital/
├── index.html
├── css/
│ └── main.css
├── js/
│ ├── audio-engine.js
│ └── main.js
├── music/
│ ├── keyq.wav
│ ├── keyw.wav
│ ├── keye.wav
│ ├── keya.wav
│ ├── keys.wav
│ ├── keyd.wav
│ ├── keyz.wav
│ ├── keyx.wav
│ └── keyc.wav
└── images/
index.htmlDefine a interface da drum machine, incluindo:
js/audio-engine.jsEncapsula o carregamento e a reprodução dos samples com Web Audio API, mantendo suporte a fontes simultâneas.
js/main.jsConcentra o comportamento da aplicação:
css/main.cssResponsável pela identidade visual e responsividade.
A interface segue a direção performance instrument documentada em DESIGN.md, combinando linguagem de hardware musical com UI contemporânea. Principais elementos:
Quando uma tecla válida é pressionada:
Teclado / clique
↓
Identificação do pad
↓
playSound()
↓
Sample de áudio
↓
Feedback visual do pad
No modo sequenciador:
Grid de 16 passos / texto sincronizado
↓
Pattern normalizado
↓
Cálculo do intervalo pelo BPM
↓
Agendamento dos samples
↓
Reprodução da sequência
Como o projeto não possui dependências nem build, basta clonar o repositório:
git clone https://github.com/paulociano/bateria-digital.git
cd bateria-digital
Depois, abra index.html no navegador.
Para evitar limitações de alguns navegadores com arquivos locais, também é possível usar um servidor HTTP simples:
python -m http.server 8000
Depois acesse http://localhost:8000.
Nenhuma biblioteca ou framework JavaScript é necessário.
A interface possui adaptações específicas para telas menores.
Em dispositivos móveis:
O projeto inclui alguns cuidados de acessibilidade, como:
aria-label nos controles principais;aria-live para informar o estado e o progresso da reprodução;prefers-reduced-motion;A proposta é transformar o teclado do computador em um instrumento musical extremamente simples:
pressione uma tecla, ouça um som, combine padrões e encontre um groove.
Sem cadastro, sem dependências e sem configuração.
Desenvolvido por Paulo Henrique.
A Bateria Digital possui dois kits:
Preserva os nove WAVs históricos do projeto. Como o repositório original não documentava a identidade instrumental de cada arquivo, seus rótulos permanecem neutros como Sample 01–09.
Kit adicional com nove one-shots CC0 importados do projeto open source Groovie:
| Tecla | Instrumento |
|---|---|
| Q | Kick |
| W | Snare |
| E | Closed Hat |
| A | Clap |
| S | Low Tom |
| D | Mid Tom |
| Z | High Tom |
| X | Open Hat |
| C | Crash |
A origem e o licenciamento dos arquivos estão documentados em THIRD_PARTY_SAMPLES.md.
O botão Compartilhar serializa o estado de trabalho atual no hash da URL. O link inclui:
Nenhum dado é enviado para servidor. Ao abrir um link compartilhado, o estado codificado na URL tem precedência sobre o estado local salvo naquele navegador.
O botão Gravar captura o master da Web Audio engine usando MediaRecorder. Enquanto a gravação está ativa, pads e playback continuam funcionando normalmente. Ao finalizar, o navegador gera um arquivo de áudio no melhor formato suportado, priorizando Opus/WebM e Opus/Ogg.
A gravação depende de Web Audio + MediaRecorder. Em navegadores sem esse suporte, o restante da drum machine continua funcionando, mas a exportação fica indisponível.
A lógica pura de parsing, normalização de pattern, estado de mixer e serialização de links compartilháveis vive em js/core.js e é coberta por testes nativos do Node:
node --test tests/*.test.cjs
O workflow .github/workflows/test.yml executa essa suíte em pull requests.
Para reduzir trabalho na abertura da página, a Web Audio engine não decodifica os samples no carregamento inicial. O carregamento acontece na primeira interação que realmente precisa de áudio.
A interface possui gates estáticos para:
@import para web fonts;prefers-contrast: more.O workflow de testes roda em pull requests e também após pushes na main.
A auditoria em navegador real continua necessária para métricas de Lighthouse/Core Web Vitals, navegação por teclado completa e inspeção auditiva da Web Audio API.
O grid principal agora possui 9 linhas × 16 colunas:
Patterns antigos continuam compatíveis. O app migra automaticamente o formato legado som | pausa para o novo formato polifônico som[] por step.
O campo textual continua disponível como atalho rápido, mas é deliberadamente monofônico. Ao editar o texto, ele substitui o pattern inteiro por uma sequência com no máximo um som por step.
Quando o grid possui dois ou mais sons no mesmo step, o campo textual fica vazio e indica que o pattern é polifônico, evitando representar incorretamente o groove.