Amostras de áudio funcionais até o momento. Agulha de tempo, mute/solo e ajustado com a velocidade de reprodução

src/manual.md

@@ -0,0 +1,129 @@
+# Visão Geral do Código
+    Este é o código de um sequenciador de música para a web, similar a um "DAW" (Digital Audio Workstation) simplificado, focado em criar batidas e melodias. Ele permite carregar e salvar projetos no formato .mmp (LMMS), manipular trilhas de instrumentos, programar notas em um sequenciador e controlar aspectos como volume e pan.
+
+# main.js - O Ponto de Partida
+    Este arquivo inicializa a aplicação. Ele conecta os botões da interface (como "Play", "Salvar", "Adicionar Trilha") às suas funções correspondentes, que estão em outros arquivos. Pense nele como o cérebro que delega as tarefas.
+
+# Função Principal 
+    - Configura todos os "ouvintes de eventos" (event listeners).
+
+    Exemplo: Quando o usuário clica no botão com o ID play-btn, a função togglePlayback do arquivo audio.js é chamada para iniciar ou parar a música.
+
+```JavaScript
+
+// Exemplo de como um botão é conectado a uma função
+playBtn.addEventListener("click", togglePlayback);
+addInstrumentBtn.addEventListener("click", addTrackToState);
+saveMmpBtn.addEventListener("click", generateMmpFile);
+```
+# state.js - O Coração da Aplicação
+
+    Aqui fica guardado todo o estado atual do projeto. Isso inclui as trilhas, as notas, o volume de cada instrumento, se a música está tocando ou não, etc. Quando algo muda (por exemplo, o usuário adiciona uma nota), este estado é atualizado, e a interface visual reflete essa mudança.
+
+
+# Função Principal
+    - Manter um objeto central (appState) com todas as informações do projeto.
+
+    Exemplo: O objeto appState contém uma lista (tracks) onde cada item representa um instrumento com seus padrões de notas, volume e nome do sample.
+
+```JavaScript
+
+export let appState = {
+  tracks: [], // Lista de instrumentos
+  isPlaying: false, // A música está tocando?
+  currentStep: 0, // Qual passo da batida está sendo tocado
+  masterVolume: 0.8, // Volume geral
+};
+```
+
+# ui.js - A Interface Gráfica
+    
+    Este arquivo é responsável por desenhar tudo o que o usuário vê e com o que interage na tela: as trilhas, os "knobs" de volume, a grade do sequenciador e o navegador de arquivos de áudio. Ele lê os dados do state.js para saber o que mostrar.
+
+# Função Principal 
+    - Gerar e atualizar os elementos HTML da página.
+
+    Exemplo: A função renderApp cria uma "div" para cada trilha existente no appState, e redrawSequencer desenha os quadradinhos de notas, colorindo os que estão ativos.
+
+```JavaScript
+
+// Exemplo da lógica para desenhar os passos da batida
+for (let i = 0; i < totalGridSteps; i++) {
+  const stepElement = document.createElement("div");
+  // Se a nota 'i' estiver marcada como ativa no estado, adiciona a classe 'active'
+  if (patternSteps[i] === true) {
+    stepElement.classList.add("active");
+  }
+  sequencerContainer.appendChild(stepElement);
+}
+``` 
+
+# audio.js - O Módulo de Som
+
+    Este é o motor de áudio. Ele usa a API de Áudio do navegador para carregar os samples (os sons dos instrumentos), controlar a reprodução, gerenciar o tempo (BPM), tocar o metrônomo e garantir que as notas toquem na hora certa.
+
+# Função Principal 
+    - Controlar a reprodução de áudio e o tempo da música.
+
+    Exemplo: A função tick é chamada repetidamente em um intervalo de tempo preciso (calculado a partir do BPM). A cada chamada, ela verifica quais notas devem ser tocadas no passo atual e dispara os sons correspondentes.
+
+```JavaScript
+
+function tick() {
+  // Para cada trilha...
+  appState.tracks.forEach((track) => {
+    // Se a nota no passo atual estiver ativa...
+    if (activePattern.steps[appState.currentStep]) {
+      // Toca o som daquela trilha
+      playSample(track.samplePath, track.id);
+    }
+  });
+  // Avança para o próximo passo
+  appState.currentStep = (appState.currentStep + 1) % totalSteps;
+}
+```
+
+# file.js - O Gerenciador de Arquivos
+
+    Responsável por ler, interpretar e salvar arquivos de projeto. Ele sabe como decodificar o formato .mmp (baseado em XML) e traduzi-lo para a estrutura de dados que a aplicação entende (appState). Também faz o caminho inverso, convertendo o estado atual do projeto em um arquivo .mmp que pode ser salvo.
+
+# Função Principal
+    - Ler e escrever projetos no formato .mmp.
+
+    Exemplo: Ao carregar um arquivo, a função parseMmpContent usa o DOMParser do navegador para ler o XML, extrair informações como BPM e as notas de cada trilha, e popular o appState.
+
+# Utilitários
+    - config.js e utils.js
+
+# config.js
+    - Guarda valores constantes e configurações padrão, como o volume inicial ou o pan. Isso facilita a manutenção, mantendo números "mágicos" em um só lugar.
+
+# utils.js 
+    - Contém pequenas funções de ajuda usadas em várias partes do código. Por exemplo, a função getTotalSteps calcula quantos "passos" a música terá com base no número de compassos e na fórmula de compasso definidos pelo usuário.
+
+# upload_server.py - O Servidor de Suporte
+    
+    Este é um pequeno servidor web escrito em Python que roda nos bastidores. Sua principal tarefa é permitir o upload de novos samples de áudio. Quando um novo arquivo é enviado, ele o salva na pasta correta e, crucialmente, atualiza os arquivos de "manifesto" (.json). Esses manifestos são listas que a interface web consulta para saber quais samples e projetos estão disponíveis para serem carregados.
+
+# Função Principal 
+    - Receber uploads de arquivos e manter os manifestos de samples e projetos atualizados.
+
+    Exemplo: Um usuário faz o upload do arquivo kick_drum.wav. O servidor salva este arquivo e automaticamente adiciona uma entrada para kick_drum.wav no arquivo samples-manifest.json. Da próxima vez que o usuário abrir o navegador de samples, o novo bumbo aparecerá na lista.
+
+# style.css - A Aparência
+    
+    Este é o arquivo de estilização. Ele define todas as cores, tamanhos, fontes e o layout da aplicação. É o que dá ao sequenciador sua aparência de "software de música", com temas escuros e elementos visuais que lembram equipamentos de estúdio.
+
+# Função Principal 
+    - Definir o estilo visual de todos os componentes.
+
+    Exemplo: O estilo para um passo ativo no sequenciador é definido aqui, fazendo-o brilhar em verde.
+
+```CSS
+
+.step.active {
+  background-color: var(--accent-green);
+  border: 1px solid #fff;
+  box-shadow: 0 0 8px var(--accent-green);
+}
+```