Sobre Teoria Desvendada v3
Um aplicativo web moderno e acessível para aprender teoria musical do zero. Combina navegação em abas, síntese de áudio Web Audio API, quiz visual interativo e gamificação com badges para criar uma experiência de aprendizado imersiva, responsiva e totalmente offline.
✨ O que é novo na v3:
✅ Web Audio API para síntese de intervalos, acordes e escalas
✅ Sistema de abas para navegação limpa (7 abas temáticas)
✅ Quiz visual com feedback imediato e controle do usuário
✅ Gamificação com barra de progresso e badges desbloqueáveis
✅ Ciclo das Quintas com SVG interativo (12 notas clicáveis)
✅ Tema claro/escuro com persistência em localStorage
✅ Web Audio API para síntese de intervalos, acordes e escalas
✅ Sistema de abas para navegação limpa (7 abas temáticas)
✅ Quiz visual com feedback imediato e controle do usuário
✅ Gamificação com barra de progresso e badges desbloqueáveis
✅ Ciclo das Quintas com SVG interativo (12 notas clicáveis)
✅ Tema claro/escuro com persistência em localStorage
7 Abas Interativas
🎯 Ciclo das Quintas
Visualização SVG interativa com 12 notas. Clique em qualquer nota para explorar tonalidades, escalas, acidentes e relações harmônicas.
Visualização SVG interativa com 12 notas. Clique em qualquer nota para explorar tonalidades, escalas, acidentes e relações harmônicas.
📏 Intervalos
Aprenda a distância entre notas (em semitones). 7 botões de áudio para ouvir cada intervalo sintetizado.
Aprenda a distância entre notas (em semitones). 7 botões de áudio para ouvir cada intervalo sintetizado.
🎼 Escalas
Maiores e menores naturais. Padrões de tom-semitom explicados + botões para ouvir as escalas sequencialmente.
Maiores e menores naturais. Padrões de tom-semitom explicados + botões para ouvir as escalas sequencialmente.
🎹 Acordes
Maior (feliz), Menor (triste) e Diminuto (tenso). Fórmulas + 3 botões de áudio para comparar sonoridades.
Maior (feliz), Menor (triste) e Diminuto (tenso). Fórmulas + 3 botões de áudio para comparar sonoridades.
🎭 Campo Harmônico
Tabela de acordes em Dó Maior. Progressões populares (I-IV-V, I-vi-IV-V) com explicação do porquê funcionam.
Tabela de acordes em Dó Maior. Progressões populares (I-IV-V, I-vi-IV-V) com explicação do porquê funcionam.
🎮 Quiz
5 perguntas sobre toda a teoria. Feedback visual (✅ correto / ❌ errado) com controle total do usuário para próxima pergunta.
5 perguntas sobre toda a teoria. Feedback visual (✅ correto / ❌ errado) com controle total do usuário para próxima pergunta.
📊 Progresso
Barra de progresso por módulo, progresso total em %, badges desbloqueáveis (Iniciante, Músico 101, Mestre, Compositor).
Barra de progresso por módulo, progresso total em %, badges desbloqueáveis (Iniciante, Músico 101, Mestre, Compositor).
Web Audio API Integrada
Todos os sons são gerados em tempo real via osciladores sintetizados (não são arquivos MP3):
- playNote(freq): Nota única com envelope ADSR simplificado
- playInterval(semitones): Duas notas simultâneas para comparar distâncias
- playChord(type): Três notas simultâneas (maior/menor/diminuto)
- playScale(type): Oito notas sequenciais com 250ms entre cada
Como Usar o App
- Abra index.html no navegador (Chrome, Firefox, Safari, Edge).
- Navegue pelas 7 abas usando os botões no topo. Cada uma é independente.
- Clique em botões 🔊 para ouvir. Nota: Primeiro clique pode parecer mudo (política de navegadores) — clique novamente!
- No Ciclo das Quintas: Clique em qualquer nota para explorar a tonalidade (escala, armadura, relações).
- No Quiz: Selecione a resposta. Feedback imediato com botão "Próxima Pergunta" aparece.
- Seu progresso é salvo automaticamente em localStorage (persiste até limpar cache).
- Alterne Tema: Botão 🌙 no topo-direito (salva preferência).
Recomendações de Estudo
- Semana 1 - Intervalos: Ouça cada intervalo 3x. Seu ouvido aprende por repetição.
- Semanas 2-3 - Escalas: Toque no seu instrumento (ou cante) enquanto ouve.
- Semana 4 - Acordes: Sinta como Maior é "feliz" vs Menor é "triste".
- Semana 5 - Campo Harmônico: Procure essas progressões em músicas que gosta.
- Contínuo - Quiz: Faça o quiz 2x por semana. Badges motivam!
- Explore o Ciclo: A qualquer momento, clique nas 12 notas e descubra padrões.
Instalação como PWA (Opcional)
Chrome / Edge (Windows/Android):
- Menu ⋮ → "Instalar aplicativo" (ou barra de endereço)
- Aparecerá ícone na área de trabalho / início
Safari (iPhone/iPad):
- Compartilhar → "Adicionar à Tela Inicial"
- Funciona 100% offline após instalar
Stack Tecnológico
- HTML5 + CSS3 + Vanilla JavaScript (sem dependências externas)
- Web Audio API para síntese de áudio
- SVG para Ciclo das Quintas interativo
- localStorage para persistência de progresso e tema
- Service Worker para PWA e cache offline
- CSS Custom Properties para sistema de temas
3 Melhorias Cirúrgicas (v3 Final)
1️⃣ Ciclo das Quintas: Dó no Norte (Ajuste Espacial)
O Ciclo Musical coloca Dó em "12 horas" (topo), não em "3 horas" (direita). Em matemática de gráficos, isso requer rotação de -90° (ou +270°).
// Antes: const rad = (note.angle * Math.PI) / 180;
// Depois: const rad = ((note.angle - 90) * Math.PI) / 180;
Resultado: Ciclo geograficamente correto, com Dó sempre no topo como na música tradicional.
2️⃣ Quiz: Controle Humano (Acessibilidade Cognitiva)
Antes: Avançava automaticamente em 1.5s (frustração para leitores lentos).
Depois: Usuário clica botão "Próxima Pergunta" após ler o feedback.
// Botão aparece dinamicamente:
const nextBtn = document.createElement('button');
nextBtn.textContent = 'Próxima Pergunta →';
nextBtn.onclick = () => { currentQuiz++; renderQuizQuestion(); };
feedback.appendChild(nextBtn);
Impacto: Respeita ritmos de leitura individuais, reduz ansiedade, melhora compreensão.
3️⃣ Web Audio: Despertar o Contexto (Compatibilidade Navegadores)
Chrome/Safari bloqueiam áudio até clique do usuário. Se o contexto "dorme", som falha.
// No início de playNote():
if (audioCtx.state === 'suspended') {
audioCtx.resume();
}
Benefício: Áudio sempre funciona, mesmo em primeiro clique ou após suspensão do telefone.
Estrutura de Arquivos
index.html— App principal (~1400 linhas, tudo integrado)relatorio.html— Esta documentaçãosw.js— Service Worker (cache offline)manifest.webmanifest— Configuração PWAicons/icon.svg— Ícone do app
localStorage Schema
{
"teoria-progress": {"ciclo": 100, "intervalos": 80, ...},
"teoria-theme": "light" | "dark"
}
Princípios de Acessibilidade Implementados
🎯 Visual
- Contraste Alto: Textos com razão 7:1 contra fundo
- Tema Claro/Escuro: Reduz fadiga ocular
- Fontes Responsivas: clamp() garante legibilidade em qualquer tela
- Cores com Significado + Ícones: ✅ verde e ❌ vermelho + símbolos
🎧 Auditivo
- Síntese de Áudio em Tempo Real: Sem dependência de arquivos de áudio (economiza banda)
- Frequências Precisas: Equal temperament (padrão musical)
- Envelope Smooth: Ramp exponencial previne clicks/pops
🧠 Cognitivo
- Navegação em Abas: Uma coisa por vez (reduz sobrecarga)
- Quiz Controlado pelo Usuário: Sem pressão de cronômetro invisível
- Feedback Imediato: Sabe se acertou em tempo real
- Progresso Visível: Badges e barras motivam continuidade
⌨️ Motor
- Botões 44×44px: Fáceis de clicar em mobile
- Suporte a Teclado: Navegar entre abas com Tab + Enter
- prefers-reduced-motion: Respeita preferências de acessibilidade do SO
🌐 Web Semantics
- ARIA labels em elementos interativos
- SVG com títulos descritivos
- Role="tablist" para navegação
- Headings hierárquicos (h1 → h3)
Melhorias Futuras (v4+)
🎯 Curto Prazo (Próximas 2-4 semanas)
- Ear Training: Quiz auditivo — ouve intervalo, identifica qual é
- Teclado Virtual: Clique em teclas para tocar notas
- Exportar Progresso: Baixar relatório PDF com score
- Mais Questões Quiz: Aumentar de 5 para 15-20 perguntas
📈 Médio Prazo (1-2 meses)
- Leitura em Pauta: Reconhecer notas na clave de Sol/Fá
- Rítmica Completa: Figuras rítmicas, compassos, contagem
- Progressões Reais: Análise de músicas populares (I-vi-IV-V)
- Companion App Mobile Nativo: Versão iOS/Android com push notifications
🚀 Longo Prazo (3+ meses)
- Machine Learning: Reconhecimento de voz/microfone para ear training
- Modo Colaborativo: Múltiplos usuários, rankings, social sharing
- Integração com DAW: Exportar progressões para Ableton/Logic
- Instrumentos Reais: Acordes tocados por piano/violão samples (não síntese)
- AI Tutor: Sugestões personalizadas baseadas no progresso
Critérios de Priorização
- Impacto Pedagógico: Ear training = +70% efetividade de aprendizado
- Viabilidade Técnica: Ear Training é apenas WebAudio nova função
- Feedback de Usuário: Sugestões da comunidade de professores
- Acessibilidade: Todas as features mantêm 100% WCAG 2.1 AA
Contribuições Bem-Vindas! 🎉
Este é um projeto de código aberto. Se quiser contribuir com:
- Novas funcionalidades de áudio
- Traduções (EN, ES, FR, ...)
- Melhorias de UI/UX
- Testes de acessibilidade
Abra uma issue ou PR no repositório GitHub!
Estrutura do Código Principal (index.html)
📍 Seções Principais:
// ====== AUDIO CONTEXT ======(linhas ~650-750) — Web Audio API// ====== NAVEGAÇÃO EM ABAS ======(linhas ~800-815) — Tab switching// ====== SISTEMA DE PROGRESSO ======(linhas ~820-900) — localStorage// ====== CICLO DAS QUINTAS ======(linhas ~920-1020) — SVG + data// ====== QUIZ ======(linhas ~1050-1150) — Lógica interativa// ====== TEMA ======(linhas ~1160-1180) — Light/Dark// ====== INIT ======(linhas ~1190-1200) — DOMContentLoaded
Tecnologias Envolvidas
| Tecnologia | Uso | Razão |
|---|---|---|
| Web Audio API | Síntese de áudio | Sem dependências, áudio em tempo real |
| SVG | Ciclo visual | Escalável, acessível, interativo |
| localStorage | Persistência | Progresso + tema salvo offline |
| Service Worker | PWA + cache | Funciona 100% offline |
| CSS Custom Props | Temas dinâmicos | Alterna claro/escuro sem JS pesado |
Suporte & Contato
Navegador Compatível: Chrome 25+, Firefox 19+, Safari 12+, Edge 79+
Dispositivos: Desktop, tablet, smartphone
Requisitos: Nenhum! Apenas um navegador moderno + conexão (primeira vez). Depois funciona offline.
💡 Dica: Se o som não tocar no primeiro clique, é normal (política de navegadores).
Clique novamente em um botão 🔊 e funcionará!