+ `;
+
+ const grid = audioTrackLane.querySelector('.spectrogram-view-grid');
+ const canvas = document.createElement('canvas');
+ canvas.className = 'waveform-canvas';
+ canvas.height = 60;
+ grid.prepend(canvas);
+
+ audioTrackContainer.appendChild(audioTrackLane);
+
+ if (trackData.audioBuffer) {
+ const bpm = parseInt(document.getElementById("bpm-input").value, 10) || 120;
+ const sampleDuration = trackData.audioBuffer.duration;
+
+ const stepsPerSecond = (bpm / 60) * 4;
+ const totalSteps = sampleDuration * stepsPerSecond;
+
+ const canvasWidth = totalSteps * PIXELS_PER_STEP;
+ canvas.width = canvasWidth;
+
+ drawWaveform(canvas, trackData.audioBuffer, 'var(--accent-green)');
+
+ const numberOfBars = Math.ceil(canvasWidth / PIXELS_PER_BAR);
+ for (let i = 0; i < numberOfBars; i++) {
+ if (i === 0) continue;
+ const marker = document.createElement('div');
+ marker.className = 'bar-marker';
+ marker.textContent = i + 1;
+ marker.style.left = `${i * PIXELS_PER_BAR}px`;
+ grid.appendChild(marker);
+ }
+ }
+
+ const soloButton = audioTrackLane.querySelector('.track-solo-btn');
+ if (soloButton) {
+ if (trackData.isSoloed) {
+ soloButton.classList.add('active');
+ }
+ soloButton.addEventListener('click', (e) => {
+ e.stopPropagation();
+ toggleAudioTrackSolo(trackData.id);
+ });
+ }
+
+ const volumeKnob = audioTrackLane.querySelector('.knob[data-control="volume"]');
+ addKnobInteraction(volumeKnob);
+ updateKnobVisual(volumeKnob, "volume");
+
+ const panKnob = audioTrackLane.querySelector('.knob[data-control="pan"]');
+ addKnobInteraction(panKnob);
+ updateKnobVisual(panKnob, "pan");
+
+ const waveformWrapper = audioTrackLane.querySelector('.spectrogram-view-wrapper');
+ const handleSeek = (event) => {
+ const bpm = parseInt(document.getElementById("bpm-input").value, 10) || 120;
+ const stepsPerSecond = (bpm / 60) * 4;
+ const pixelsPerSecond = stepsPerSecond * PIXELS_PER_STEP;
+
+ const rect = waveformWrapper.getBoundingClientRect();
+ const clickX = event.clientX - rect.left;
+ const scrollLeft = waveformWrapper.scrollLeft;
+ const absoluteX = clickX + scrollLeft;
+
+ const newTime = absoluteX / pixelsPerSecond;
+
+ seekAudioEditor(newTime);
+ };
+
+ waveformWrapper.addEventListener('mousedown', (e) => {
+ e.preventDefault();
+ handleSeek(e);
+ const onMouseMove = (moveEvent) => handleSeek(moveEvent);
+ const onMouseUp = () => {
+ document.removeEventListener('mousemove', onMouseMove);
+ document.removeEventListener('mouseup', onMouseUp);
+ };
+ document.addEventListener('mousemove', onMouseMove);
+ document.addEventListener('mouseup', onMouseUp);
+ });
+ });
+}
+
export function renderApp() {
const trackContainer = document.getElementById("track-container");
trackContainer.innerHTML = "";
@@ -139,25 +287,12 @@ export function renderApp() {
trackLane.addEventListener('click', () => {
if (appState.activeTrackId === trackData.id) return;
-
- // A linha stopPlayback() também foi REMOVIDA daqui
-
+ stopPlayback();
appState.activeTrackId = trackData.id;
document.querySelectorAll('.track-lane').forEach(lane => lane.classList.remove('active-track'));
trackLane.classList.add('active-track');
updateGlobalPatternSelector();
-
- // Apenas redesenha a UI, sem parar a música
- const activeTrack = appState.tracks.find(t => t.id === appState.activeTrackId);
- if (activeTrack) {
- const activePattern = activeTrack.patterns[activeTrack.activePatternIndex];
- if (activePattern) {
- const stepsPerBar = 16;
- const requiredBars = Math.ceil(activePattern.steps.length / stepsPerBar);
- document.getElementById("bars-input").value = requiredBars > 0 ? requiredBars : 1;
- redrawSequencer();
- }
- }
+ redrawSequencer();
});
trackLane.addEventListener("dragover", (e) => { e.preventDefault(); trackLane.classList.add("drag-over"); });
@@ -182,6 +317,7 @@ export function renderApp() {
updateGlobalPatternSelector();
redrawSequencer();
+ renderAudioEditor();
}
export function redrawSequencer() {
@@ -266,7 +402,7 @@ function addKnobInteraction(knobElement) {
if (e.button !== 0) return;
e.preventDefault();
const trackId = knobElement.dataset.trackId;
- const track = appState.tracks.find((t) => t.id == trackId);
+ const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
if (!track) return;
const startY = e.clientY;
const startValue = controlType === "volume" ? track.volume : track.pan;
@@ -293,7 +429,7 @@ function addKnobInteraction(knobElement) {
knobElement.addEventListener("wheel", (e) => {
e.preventDefault();
const trackId = knobElement.dataset.trackId;
- const track = appState.tracks.find((t) => t.id == trackId);
+ const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
if (!track) return;
const step = 0.05;
const direction = e.deltaY < 0 ? 1 : -1;
@@ -310,7 +446,7 @@ function addKnobInteraction(knobElement) {
function updateKnobVisual(knobElement, controlType) {
const trackId = knobElement.dataset.trackId;
- const track = appState.tracks.find((t) => t.id == trackId);
+ const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
if (!track) return;
const indicator = knobElement.querySelector(".knob-indicator");
if (!indicator) return;
@@ -359,11 +495,7 @@ export function highlightStep(stepIndex, isActive) {
export async function loadAndRenderSampleBrowser() {
const browserContent = document.getElementById("browser-content");
try {
- // --- CORREÇÃO AQUI ---
- // Adiciona um timestamp à URL para evitar que o navegador use uma versão antiga (em cache) do arquivo.
const response = await fetch(`metadata/samples-manifest.json?v=${Date.now()}`);
- // --- FIM DA CORREÇÃO ---
-
if (!response.ok) {
throw new Error("Arquivo samples-manifest.json não encontrado.");
}
@@ -459,4 +591,16 @@ export async function showOpenProjectModal() {
export function closeOpenProjectModal() {
const openProjectModal = document.getElementById("open-project-modal");
openProjectModal.classList.remove("visible");
+}
+
+export function updatePlayheadVisual(pixels) {
+ document.querySelectorAll('.audio-track-lane .playhead').forEach(ph => {
+ ph.style.left = `${pixels}px`;
+ });
+}
+
+export function resetPlayheadVisual() {
+ document.querySelectorAll('.audio-track-lane .playhead').forEach(ph => {
+ ph.style.left = '0px';
+ });
}
\ No newline at end of file
diff --git a/assets/js/creations/waveform.js b/assets/js/creations/waveform.js
new file mode 100644
index 0000000..8504f1c
--- /dev/null
+++ b/assets/js/creations/waveform.js
@@ -0,0 +1,48 @@
+// js/waveform.js
+
+/**
+ * Desenha a forma de onda de um AudioBuffer em um elemento Canvas.
+ * @param {HTMLCanvasElement} canvas - O elemento canvas onde o desenho será feito.
+ * @param {AudioBuffer} audioBuffer - O buffer de áudio decodificado da faixa.
+ * @param {string} color - A cor da forma de onda (ex: '#2ecc71').
+ */
+export function drawWaveform(canvas, audioBuffer, color) {
+ if (!canvas || !audioBuffer) return;
+
+ const ctx = canvas.getContext('2d');
+ const width = canvas.width;
+ const height = canvas.height;
+ const channelData = audioBuffer.getChannelData(0); // Pega os dados do primeiro canal
+ const step = Math.ceil(channelData.length / width);
+ const amp = height / 2; // Amplitude máxima do desenho
+
+ ctx.clearRect(0, 0, width, height); // Limpa o canvas
+ ctx.strokeStyle = color;
+ ctx.lineWidth = 2;
+ ctx.beginPath();
+
+ for (let i = 0; i < width; i++) {
+ let min = 1.0;
+ let max = -1.0;
+
+ // Encontra o valor mínimo e máximo para um bloco de amostras
+ for (let j = 0; j < step; j++) {
+ const datum = channelData[(i * step) + j];
+ if (datum < min) {
+ min = datum;
+ }
+ if (datum > max) {
+ max = datum;
+ }
+ }
+
+ // Desenha a linha vertical para aquele ponto no tempo
+ const x = i;
+ const y_max = (1 + max) * amp;
+ const y_min = (1 + min) * amp;
+
+ ctx.moveTo(x, y_max);
+ ctx.lineTo(x, y_min);
+ }
+ ctx.stroke();
+}
\ No newline at end of file
diff --git a/creation.html b/creation.html
index 234d32e..a2d7824 100644
--- a/creation.html
+++ b/creation.html
@@ -18,108 +18,148 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
ANDAMENTO/BPM
+
+
+
+
+
+
+
-
-
-
-
-
-
-
COMPASSOS
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
- /
-
-
-
-
+
ANDAMENTO/BPM
+
+
+
+
+
+
+
+
COMPASSOS
+
+
+
+
+
+
+
+
+ /
+
+
+
+
+
+
+
COMPASSO
+
+
+
00:00:00
+
MIN:SEC:MSEC
+
+
+
+
+
+
+
+
+
+ VOL MASTER
+
+
+
+ PAN MASTER
+
+
+
+
+
+
+
+ Mostrar/esconder Editor de Bases
+
+
-
COMPASSO
-
-
-
00:00:00
-
MIN:SEC:MSEC
-
-
-
-
-
-
-
-
-
- VOL MASTER
-
-
-
- PAN MASTER
-
-
-
-
-
-
-
- Mostrar/esconder Editor de Bases
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ Editor de Amostras de Áudio
+
+
+
+
+
+
+
+
+
+
+
+ bassslap02.ogg
+
+
+
+
+
+
+ VOL
+
+
+
+
+
+ PAN
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
diff --git a/metadata/samples-manifest.json b/metadata/samples-manifest.json
index 5dac132..12cdbc4 100644
--- a/metadata/samples-manifest.json
+++ b/metadata/samples-manifest.json
@@ -528,7 +528,11 @@
"_isFile": true
}
},
- "samples": {},
+ "samples": {
+ "bassdrum_acoustic02_-_Copia.ogg": {
+ "_isFile": true
+ }
+ },
"shapes": {
"additive.wav": {
"_isFile": true
diff --git a/readme.md b/readme.md
index 728fd24..9e9bc11 100644
--- a/readme.md
+++ b/readme.md
@@ -8,9 +8,12 @@ Isso ativará o ambiente de desenvolvimento.
# ----------------------- // --------------------------
# Serviço Watchdog para verificar alterações nas pastas de samples
-Foi criado um serviço(/etc/systemd/system/mmpCreator-upload-server.service) com nome "mmpCreator-upload-server.service" para verificar alterações na pasta src/samples se há alguma mudança. Caso tenha, ele fará um novo build do site para que seja atualizado em tempo real todas as alterações. (tempo de 5 em 5 segundos)
+Foi criado um serviço (/etc/systemd/system/mmpCreator-upload-server.service) com nome "mmpCreator-upload-server.service" para verificar alterações na pasta src/samples se há alguma mudança. Caso tenha, ele fará um novo build do site para que seja atualizado em tempo real todas as alterações. (tempo de 5 em 5 segundos)
A atualização no site é feita a partir de build do site feito pelo script.
+# TO DO
+- Verificar caminho do build, pois está sendo feito apenas na parte de testes
+
# ----------------------- // --------------------------
# Servidor de Upload de samples
diff --git a/src/manual.md b/src/manual.md
new file mode 100644
index 0000000..a3f473c
--- /dev/null
+++ b/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);
+}
+```
\ No newline at end of file
diff --git a/src/samples/samples/bassdrum_acoustic02_-_Copia.ogg b/src/samples/samples/bassdrum_acoustic02_-_Copia.ogg
new file mode 100644
index 0000000..ece972e
Binary files /dev/null and b/src/samples/samples/bassdrum_acoustic02_-_Copia.ogg differ