Arrumando botões de volume e pan, criação de novos compassos.

assets/js/creations/audio.js

@@ -42,44 +42,41 @@ export function playMetronomeSound(isDownbeat) {
   oscillator.stop(audioContext.currentTime + 0.05);
 }
 
-// (ALTERADO) Função reescrita para usar AudioBuffers pré-carregados
+// Função otimizada para usar AudioBuffers
 export function playSample(filePath, trackId) {
   initializeAudioContext();
   if (!filePath) return;
 
   const track = trackId ? appState.tracks.find((t) => t.id == trackId) : null;
 
-  // Se a função for chamada sem um ID de track (ex: clique no browser de samples),
-  // usa o método antigo como fallback para uma prévia rápida.
+  // Se for uma prévia (sem trilha), usa o método antigo e rápido
   if (!track) {
     const audio = new Audio(filePath);
     audio.play();
     return;
   }
-
-  // Se a track não tiver o buffer de áudio pronto, avisa no console e não toca.
+  
+  // Se a trilha não tiver o buffer carregado, não toca
   if (!track.audioBuffer) {
-    console.warn(`Buffer para a track ${track.name} ainda não carregado.`);
+    console.warn(`Buffer para a trilha ${track.name} ainda não carregado.`);
     return;
   }
 
-  // 1. Cria uma fonte de áudio leve (BufferSource)
+  // Cria uma fonte de áudio leve a partir do buffer
   const source = audioContext.createBufferSource();
-  // 2. Conecta o buffer de áudio já decodificado
   source.buffer = track.audioBuffer;
 
-  // 3. Conecta na cadeia de áudio da track (respeitando volume e pan)
+  // Conecta na cadeia de áudio da trilha (respeitando volume e pan)
   if (track.gainNode) {
     source.connect(track.gainNode);
   } else {
     source.connect(mainGainNode); // Fallback
   }
 
-  // 4. Toca o som imediatamente
+  // Toca o som imediatamente
   source.start(0);
 }
 
-
 function tick() {
   const totalSteps = getTotalSteps();
   if (totalSteps === 0) {

assets/js/creations/file.js

@@ -1,7 +1,7 @@
 // js/file.js
-import { appState } from "./state.js";
+import { appState, loadAudioForTrack } from "./state.js";
 import { getTotalSteps } from "./utils.js";
-import { renderApp } from "./ui.js";
+import { renderApp, getSamplePathMap } from "./ui.js";
 import { NOTE_LENGTH, TICKS_PER_BAR } from "./config.js";
 import {
   initializeAudioContext,
@@ -26,14 +26,14 @@ export async function handleFileLoad(file) {
     } else {
       xmlContent = await file.text();
     }
-    parseMmpContent(xmlContent);
+    await parseMmpContent(xmlContent);
   } catch (error) {
     console.error("Erro ao carregar o projeto:", error);
     alert(`Erro ao carregar projeto: ${error.message}`);
   }
 }
 
-export function parseMmpContent(xmlString) {
+export async function parseMmpContent(xmlString) {
   initializeAudioContext();
   const parser = new DOMParser();
   const xmlDoc = parser.parseFromString(xmlString, "application/xml");
@@ -43,16 +43,18 @@ export function parseMmpContent(xmlString) {
 
   const head = xmlDoc.querySelector("head");
   if (head) {
-    document.getElementById("bpm-input").value =
-      head.getAttribute("bpm") || 140;
-    document.getElementById("compasso-a-input").value =
-      head.getAttribute("timesig_numerator") || 4;
-    document.getElementById("compasso-b-input").value =
-      head.getAttribute("timesig_denominator") || 4;
+    document.getElementById("bpm-input").value = head.getAttribute("bpm") || 140;
+    document.getElementById("bars-input").value = head.getAttribute("num_bars") || 1;
+    document.getElementById("compasso-a-input").value = head.getAttribute("timesig_numerator") || 4;
+    document.getElementById("compasso-b-input").value = head.getAttribute("timesig_denominator") || 4;
   }
+
   const sampleTrackElements = xmlDoc.querySelectorAll(
     'instrument[name="audiofileprocessor"]'
   );
+
+  const pathMap = getSamplePathMap();
+
   sampleTrackElements.forEach((instrumentNode) => {
     const afpNode = instrumentNode.querySelector("audiofileprocessor");
     const instrumentTrackNode = instrumentNode.parentElement;
@@ -61,27 +63,34 @@ export function parseMmpContent(xmlString) {
 
     const audioContext = getAudioContext();
     const mainGainNode = getMainGainNode();
-    const totalSteps = parseInt(
-      trackNode.querySelector("pattern")?.getAttribute("steps") ||
-        getTotalSteps(),
-      10
-    );
+    
+    const totalSteps = getTotalSteps();
     const newSteps = new Array(totalSteps).fill(false);
-    const ticksPerStep = totalSteps > 0 ? TICKS_PER_BAR / totalSteps : 0;
+    
+    // ==================================================================
+    // (CORREÇÃO DEFINITIVA)
+    // 1. Simplificamos o cálculo: cada step de 1/16 vale 12 ticks.
+    const ticksPerStep = 12;
 
-    trackNode.querySelectorAll("pattern note").forEach((noteNode) => {
+    // 2. Buscamos TODAS as notas da trilha, não importa em qual pattern elas estejam.
+    trackNode.querySelectorAll("note").forEach((noteNode) => {
+    // ==================================================================
       const pos = parseInt(noteNode.getAttribute("pos"), 10);
       const stepIndex = Math.round(pos / ticksPerStep);
       if (stepIndex < totalSteps) {
         newSteps[stepIndex] = true;
       }
     });
+    
+    const srcAttribute = afpNode.getAttribute("src");
+    const filename = srcAttribute.split("/").pop();
+    const finalSamplePath = pathMap[filename] || `src/samples/${srcAttribute}`;
+
     const newTrack = {
       id: Date.now() + Math.random(),
-      name:
-        afpNode.getAttribute("src").split("/").pop() ||
-        trackNode.getAttribute("name"),
-      samplePath: `samples/${afpNode.getAttribute("src")}`,
+      name: filename || trackNode.getAttribute("name"),
+      samplePath: finalSamplePath,
+      audioBuffer: null,
       steps: newSteps,
       volume: parseFloat(instrumentTrackNode.getAttribute("vol")) / 100,
       pan: parseFloat(instrumentTrackNode.getAttribute("pan")) / 100,
@@ -94,6 +103,15 @@ export function parseMmpContent(xmlString) {
     newTrack.pannerNode.pan.value = newTrack.pan;
     newTracks.push(newTrack);
   });
+
+  try {
+    const trackLoadPromises = newTracks.map(track => loadAudioForTrack(track));
+    await Promise.all(trackLoadPromises);
+    console.log("Todos os áudios do projeto foram carregados.");
+  } catch (error) {
+    console.error("Ocorreu um erro ao carregar os áudios do projeto:", error);
+  }
+
   appState.tracks = newTracks;
   renderApp();
   console.log("Projeto carregado com sucesso!", appState);
@@ -112,6 +130,7 @@ function generateNewMmp() {
   const bpm = document.getElementById("bpm-input").value;
   const sig_num = document.getElementById("compasso-a-input").value;
   const sig_den = document.getElementById("compasso-b-input").value;
+  const num_bars = document.getElementById("bars-input").value;
   const tracksXml = appState.tracks
     .map((track) => createTrackXml(track))
     .join("");
@@ -119,7 +138,7 @@ function generateNewMmp() {
   const mmpContent = `<?xml version="1.0"?>
 <!DOCTYPE lmms-project>
 <lmms-project version="1.0" type="song" creator="MMPCreator" creatorversion="1.0">
-<head mastervol="100" timesig_denominator="${sig_den}" bpm="${bpm}" timesig_numerator="${sig_num}" masterpitch="0"/>
+<head mastervol="100" timesig_denominator="${sig_den}" bpm="${bpm}" timesig_numerator="${sig_num}" masterpitch="0" num_bars="${num_bars}"/>
 <song>
 <trackcontainer type="song">
   <track type="1" solo="0" muted="0" name="Beat/Bassline 0">
@@ -150,6 +169,7 @@ function modifyAndSaveExistingMmp() {
   const head = xmlDoc.querySelector("head");
   if (head) {
     head.setAttribute("bpm", document.getElementById("bpm-input").value);
+    head.setAttribute("num_bars", document.getElementById("bars-input").value);
     head.setAttribute(
       "timesig_numerator",
       document.getElementById("compasso-a-input").value
@@ -185,10 +205,10 @@ function modifyAndSaveExistingMmp() {
 function createTrackXml(track) {
   if (!track.samplePath) return "";
   const totalSteps = track.steps.length || getTotalSteps();
-  const ticksPerStep = totalSteps > 0 ? TICKS_PER_BAR / totalSteps : 0;
+  const ticksPerStep = 12; // Valor fixo de 12 ticks por step de 1/16
   const lmmsVolume = Math.round(track.volume * 100);
   const lmmsPan = Math.round(track.pan * 100);
-  const sampleSrc = track.samplePath.replace("samples/", "");
+  const sampleSrc = track.samplePath.replace("src/samples/", "");
   const notesXml = track.steps
     .map((isActive, index) => {
       if (isActive) {
@@ -198,6 +218,26 @@ function createTrackXml(track) {
       return "";
     })
     .join("\n                ");
+
+  // Cria um pattern para cada compasso (16 steps)
+  let patternsXml = '';
+  const stepsPerBar = 16;
+  const numBars = Math.ceil(totalSteps / stepsPerBar);
+
+  for (let i = 0; i < numBars; i++) {
+    const patternNotes = track.steps.slice(i * stepsPerBar, (i + 1) * stepsPerBar).map((isActive, index) => {
+      if (isActive) {
+        const notePos = Math.round(index * ticksPerStep);
+        return `<note vol="100" len="${NOTE_LENGTH}" pos="${notePos}" pan="0" key="57"/>`;
+      }
+      return "";
+    }).join("\n                ");
+
+    patternsXml += `<pattern type="0" pos="${i * TICKS_PER_BAR}" muted="0" steps="${stepsPerBar}" name="Pattern ${i+1}">
+        ${patternNotes}
+      </pattern>`
+  }
+
   return `
     <track type="0" solo="0" muted="0" name="${track.name}">
       <instrumenttrack vol="${lmmsVolume}" pitch="0" fxch="0" pitchrange="1" basenote="57" usemasterpitch="1" pan="${lmmsPan}">
@@ -206,9 +246,7 @@ function createTrackXml(track) {
         </instrument>
         <fxchain enabled="0" numofeffects="0"/>
       </instrumenttrack>
-      <pattern type="0" pos="0" muted="0" steps="${totalSteps}" name="${track.name}">
-        ${notesXml}
-      </pattern>
+      ${patternsXml}
     </track>`;
 }
 
@@ -224,20 +262,17 @@ function downloadFile(content, fileName) {
   URL.revokeObjectURL(url);
 }
 
-// (ALTERADO) Adiciona export na frente da função
 export async function loadProjectFromServer(fileName) {
   try {
     const response = await fetch(`mmp/${fileName}`);
     if (!response.ok)
       throw new Error(`Não foi possível carregar o arquivo ${fileName}`);
     const xmlContent = await response.text();
-    parseMmpContent(xmlContent);
-    // Retorna true em caso de sucesso
+    await parseMmpContent(xmlContent);
     return true;
   } catch (error) {
     console.error("Erro ao carregar projeto do servidor:", error);
     alert(`Erro ao carregar projeto: ${error.message}`);
-    // Retorna false em caso de falha
     return false;
   }
-}
+}

assets/js/creations/main.js

@@ -36,6 +36,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const openModalCloseBtn = document.getElementById("open-modal-close-btn");
   const loadFromComputerBtn = document.getElementById("load-from-computer-btn");
   const sidebarToggle = document.getElementById("sidebar-toggle");
+  const addBarBtn = document.getElementById("add-bar-btn");
 
   newProjectBtn.addEventListener("click", () => {
     if (
@@ -51,18 +52,32 @@ document.addEventListener("DOMContentLoaded", () => {
       metronomeEnabled: false,
       originalXmlDoc: null,
     });
+    // Reseta os inputs para o padrão
+    document.getElementById('bpm-input').value = 140;
+    document.getElementById('bars-input').value = 1;
+    document.getElementById('compasso-a-input').value = 4;
+    document.getElementById('compasso-b-input').value = 4;
     renderApp();
   });
 
+  addBarBtn.addEventListener("click", () => {
+    const barsInput = document.getElementById("bars-input");
+    if (barsInput) {
+      adjustValue(barsInput, 1);
+    }
+  });
+
   openMmpBtn.addEventListener("click", showOpenProjectModal);
   loadFromComputerBtn.addEventListener("click", () => mmpFileInput.click());
-  mmpFileInput.addEventListener("change", (event) => {
+  
+  mmpFileInput.addEventListener("change", async (event) => {
     const file = event.target.files[0];
     if (file) {
-      handleFileLoad(file);
+      await handleFileLoad(file);
       closeOpenProjectModal();
     }
   });
+
   saveMmpBtn.addEventListener("click", generateMmpFile);
   addInstrumentBtn.addEventListener("click", addTrackToState);
   removeInstrumentBtn.addEventListener("click", removeLastTrackFromState);
@@ -90,10 +105,10 @@ document.addEventListener("DOMContentLoaded", () => {
   inputs.forEach((input) => {
     input.addEventListener("input", (event) => {
       enforceNumericInput(event);
-      if (appState.isPlaying && event.target.id.startsWith("compasso-")) {
+      if (appState.isPlaying && (event.target.id.startsWith("compasso-") || event.target.id === 'bars-input')) {
         stopPlayback();
       }
-      if (event.target.id.startsWith("compasso-")) {
+      if (event.target.id.startsWith("compasso-") || event.target.id === 'bars-input') {
         redrawSequencer();
       }
     });
@@ -109,6 +124,7 @@ document.addEventListener("DOMContentLoaded", () => {
     button.addEventListener("click", () => {
       const targetId = button.dataset.target + "-input";
       const targetInput = document.getElementById(targetId);
+      const step = parseInt(button.dataset.step, 10) || 1;
       if (targetInput) {
         adjustValue(targetInput, step);
       }
@@ -118,4 +134,4 @@ document.addEventListener("DOMContentLoaded", () => {
   // Inicia a aplicação
   loadAndRenderSampleBrowser();
   renderApp();
-});
+});

assets/js/creations/state.js

@@ -17,6 +17,29 @@ export let appState = {
   originalXmlDoc: null,
 };
 
+// ESSA É A FUNÇÃO QUE ESTÁ FALTANDO NO SEU ARQUIVO ATUAL
+// Função auxiliar para carregar o buffer de áudio para uma track específica
+export async function loadAudioForTrack(track) {
+  if (!track.samplePath) {
+    console.warn("Track sem samplePath, pulando o carregamento de áudio.");
+    return track;
+  }
+  try {
+    const audioContext = getAudioContext();
+    if (!audioContext) initializeAudioContext();
+
+    const response = await fetch(track.samplePath);
+    if (!response.ok) throw new Error(`Erro ao buscar o sample: ${response.statusText}`);
+    const arrayBuffer = await response.arrayBuffer();
+    track.audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+    console.log(`Áudio carregado para a trilha: ${track.name}`);
+  } catch (error) {
+    console.error(`Falha ao carregar áudio para a trilha ${track.name}:`, error);
+    track.audioBuffer = null; // Marca como falha para não tentar tocar
+  }
+  return track;
+}
+
 export function addTrackToState() {
   initializeAudioContext();
   const audioContext = getAudioContext();
@@ -26,7 +49,7 @@ export function addTrackToState() {
     id: Date.now(),
     name: "novo instrumento",
     samplePath: null,
-    audioBuffer: null, // (NOVO) Adicionado para armazenar o áudio decodificado
+    audioBuffer: null,
     steps: [],
     volume: DEFAULT_VOLUME,
     pan: DEFAULT_PAN,
@@ -47,33 +70,14 @@ export function removeLastTrackFromState() {
   renderApp();
 }
 
-// (ALTERADO) A função agora é 'async' para carregar e decodificar o áudio
 export async function updateTrackSample(trackId, samplePath) {
   const track = appState.tracks.find((t) => t.id == trackId);
   if (track) {
     track.samplePath = samplePath;
     track.name = samplePath.split("/").pop();
-    track.audioBuffer = null; // Limpa o buffer antigo enquanto carrega o novo
-    renderApp(); // Renderiza imediatamente para mostrar o novo nome
-
-    // (NOVO) Lógica para carregar e decodificar o áudio em segundo plano
-    try {
-      const audioContext = getAudioContext();
-      if (!audioContext) initializeAudioContext(); // Garante que o contexto de áudio exista
-
-      const response = await fetch(samplePath);
-      const arrayBuffer = await response.arrayBuffer();
-      const decodedAudio = await audioContext.decodeAudioData(arrayBuffer);
-
-      track.audioBuffer = decodedAudio; // Armazena o buffer decodificado no estado da track
-      console.log(`Sample ${track.name} carregado e decodificado com sucesso.`);
-
-    } catch (error) {
-      console.error("Erro ao carregar ou decodificar o sample:", error);
-      track.samplePath = null;
-      track.name = "erro ao carregar";
-      renderApp(); // Re-renderiza para mostrar a mensagem de erro
-    }
+    track.audioBuffer = null;
+    renderApp();
+    await loadAudioForTrack(track); // Reutiliza a nova função aqui
   }
 }
 

assets/js/creations/ui.js

@@ -8,7 +8,32 @@ import {
 } from "./state.js";
 import { playSample } from "./audio.js";
 import { getTotalSteps } from "./utils.js";
-import { loadProjectFromServer } from "./file.js"; // (CORREÇÃO) Importa a função que faltava
+import { loadProjectFromServer } from "./file.js";
+
+// Variável para armazenar o mapa de samples (nome do arquivo -> caminho completo)
+let samplePathMap = {};
+
+// Função para exportar o mapa de samples para outros módulos
+export function getSamplePathMap() {
+  return samplePathMap;
+}
+
+// Função recursiva para construir o mapa de samples a partir do manifest
+function buildSamplePathMap(tree, currentPath) {
+  for (const key in tree) {
+    if (key === "_isFile") continue; // Ignora a propriedade de metadados
+
+    const node = tree[key];
+    const newPath = `${currentPath}/${key}`;
+    if (node._isFile) {
+      // Se for um arquivo, adiciona ao mapa
+      samplePathMap[key] = newPath;
+    } else {
+      // Se for um diretório, continua a busca recursivamente
+      buildSamplePathMap(node, newPath);
+    }
+  }
+}
 
 // RENDERIZAÇÃO PRINCIPAL
 export function renderApp() {
@@ -116,94 +141,97 @@ export function redrawSequencer() {
 
 // LÓGICA DE INTERAÇÃO DOS KNOBS
 function addKnobInteraction(knobElement) {
-  const controlType = knobElement.dataset.control;
-  knobElement.addEventListener("mousedown", (e) => {
-    if (e.button === 1) {
+    const controlType = knobElement.dataset.control;
+    knobElement.addEventListener("mousedown", (e) => {
+      if (e.button === 1) { // Middle mouse button
+          e.preventDefault();
+          const trackId = knobElement.dataset.trackId;
+          const defaultValue = controlType === "volume" ? 0.8 : 0.0;
+          if (controlType === "volume") {
+              updateTrackVolume(trackId, defaultValue);
+          } else {
+              updateTrackPan(trackId, defaultValue);
+          }
+          updateKnobVisual(knobElement, controlType);
+      }
+    });
+    knobElement.addEventListener("mousedown", (e) => {
+      if (e.button !== 0) return; // Apenas botão esquerdo
       e.preventDefault();
       const trackId = knobElement.dataset.trackId;
-      const defaultValue = controlType === "volume" ? 0.8 : 0.0;
-      if (controlType === "volume") {
-        updateTrackVolume(trackId, defaultValue);
-      } else {
-        updateTrackPan(trackId, defaultValue);
+      const track = appState.tracks.find((t) => t.id == trackId);
+      if (!track) return;
+      const startY = e.clientY;
+      const startValue = controlType === "volume" ? track.volume : track.pan;
+      document.body.classList.add("knob-dragging");
+      function onMouseMove(moveEvent) {
+        const deltaY = startY - moveEvent.clientY;
+        const sensitivity = controlType === "volume" ? 150 : 200;
+        const newValue = startValue + deltaY / sensitivity;
+        if (controlType === "volume") {
+          updateTrackVolume(trackId, newValue);
+        } else {
+          updateTrackPan(trackId, newValue);
+        }
+        updateKnobVisual(knobElement, controlType);
       }
-    }
-  });
-  knobElement.addEventListener("mousedown", (e) => {
-    if (e.button !== 0) return;
-    e.preventDefault();
-    const trackId = knobElement.dataset.trackId;
-    const track = appState.tracks.find((t) => t.id == trackId);
-    if (!track) return;
-    const startY = e.clientY;
-    const startValue = controlType === "volume" ? track.volume : track.pan;
-    document.body.classList.add("knob-dragging");
-    function onMouseMove(moveEvent) {
-      const deltaY = startY - moveEvent.clientY;
-      const sensitivity = controlType === "volume" ? 150 : 200;
-      const newValue = startValue + deltaY / sensitivity;
+      function onMouseUp() {
+        document.body.classList.remove("knob-dragging");
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      }
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    });
+    knobElement.addEventListener("wheel", (e) => {
+      e.preventDefault();
+      const trackId = knobElement.dataset.trackId;
+      const track = appState.tracks.find((t) => t.id == trackId);
+      if (!track) return;
+      const step = 0.05;
+      const direction = e.deltaY < 0 ? 1 : -1;
       if (controlType === "volume") {
+        const newValue = track.volume + direction * step;
         updateTrackVolume(trackId, newValue);
       } else {
+        const newValue = track.pan + direction * step;
         updateTrackPan(trackId, newValue);
       }
-    }
-    function onMouseUp() {
-      document.body.classList.remove("knob-dragging");
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-    }
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
-  });
-  knobElement.addEventListener("wheel", (e) => {
-    e.preventDefault();
-    const trackId = knobElement.dataset.trackId;
-    const track = appState.tracks.find((t) => t.id == trackId);
-    if (!track) return;
-    const step = 0.05;
-    const direction = e.deltaY < 0 ? 1 : -1;
-    if (controlType === "volume") {
-      const newValue = track.volume + direction * step;
-      updateTrackVolume(trackId, newValue);
-    } else {
-      const newValue = track.pan + direction * step;
-      updateTrackPan(trackId, newValue);
-    }
-  });
+      updateKnobVisual(knobElement, controlType);
+    });
 }
 
 function updateKnobVisual(knobElement, controlType) {
-  const trackId = knobElement.dataset.trackId;
-  const track = appState.tracks.find((t) => t.id == trackId);
-  if (!track) return;
-  const indicator = knobElement.querySelector(".knob-indicator");
-  if (!indicator) return;
-  const minAngle = -135;
-  const maxAngle = 135;
-  let percentage = 0.5;
-  let title = "";
-  if (controlType === "volume") {
-    const value = track.volume;
-    const clampedValue = Math.max(0, Math.min(1.5, value));
-    percentage = clampedValue / 1.5;
-    title = `Volume: ${Math.round(clampedValue * 100)}%`;
-  } else {
-    const value = track.pan;
-    const clampedValue = Math.max(-1, Math.min(1, value));
-    percentage = (clampedValue + 1) / 2;
-    const panDisplay = Math.round(clampedValue * 100);
-    title = `Pan: ${
-      panDisplay === 0
-        ? "Centro"
-        : panDisplay < 0
-        ? `${-panDisplay} L`
-        : `${panDisplay} R`
-    }`;
-  }
-  const angle = minAngle + percentage * (maxAngle - minAngle);
-  indicator.style.transform = `translateX(-50%) rotate(${angle}deg)`;
-  knobElement.title = title;
+    const trackId = knobElement.dataset.trackId;
+    const track = appState.tracks.find((t) => t.id == trackId);
+    if (!track) return;
+    const indicator = knobElement.querySelector(".knob-indicator");
+    if (!indicator) return;
+    const minAngle = -135;
+    const maxAngle = 135;
+    let percentage = 0.5;
+    let title = "";
+    if (controlType === "volume") {
+      const value = track.volume;
+      const clampedValue = Math.max(0, Math.min(1.5, value));
+      percentage = clampedValue / 1.5;
+      title = `Volume: ${Math.round(clampedValue * 100)}%`;
+    } else {
+      const value = track.pan;
+      const clampedValue = Math.max(-1, Math.min(1, value));
+      percentage = (clampedValue + 1) / 2;
+      const panDisplay = Math.round(clampedValue * 100);
+      title = `Pan: ${
+        panDisplay === 0
+          ? "Centro"
+          : panDisplay < 0
+          ? `${-panDisplay} L`
+          : `${panDisplay} R`
+      }`;
+    }
+    const angle = minAngle + percentage * (maxAngle - minAngle);
+    indicator.style.transform = `translateX(-50%) rotate(${angle}deg)`;
+    knobElement.title = title;
 }
 
 export function highlightStep(stepIndex, isActive) {
@@ -230,6 +258,11 @@ export async function loadAndRenderSampleBrowser() {
       throw new Error("Arquivo samples-manifest.json não encontrado.");
     }
     const fileTree = await response.json();
+    
+    samplePathMap = {};
+    buildSamplePathMap(fileTree, "src/samples");
+    console.log("Mapa de samples construído:", samplePathMap);
+
     renderFileTree(fileTree, browserContent, "src/samples");
   } catch (error) {
     console.error("Erro ao carregar samples:", error);
@@ -238,82 +271,82 @@ export async function loadAndRenderSampleBrowser() {
 }
 
 function renderFileTree(tree, parentElement, currentPath) {
-  parentElement.innerHTML = "";
-  const ul = document.createElement("ul");
-  const sortedKeys = Object.keys(tree).sort((a, b) => {
-    const aIsFile = tree[a]._isFile;
-    const bIsFile = tree[b]._isFile;
-    if (aIsFile === bIsFile) return a.localeCompare(b);
-    return aIsFile ? 1 : -1;
-  });
-  for (const key of sortedKeys) {
-    const node = tree[key];
-    const li = document.createElement("li");
-    const newPath = `${currentPath}/${key}`;
-    if (node._isFile) {
-      li.innerHTML = `<i class="fa-solid fa-file-audio"></i> ${key}`;
-      li.setAttribute("draggable", true);
-      li.addEventListener("click", (e) => {
-        e.stopPropagation();
-        playSample(newPath, null);
-      });
-      li.addEventListener("dragstart", (e) => {
-        e.dataTransfer.setData("text/plain", newPath);
-        e.dataTransfer.effectAllowed = "copy";
-      });
-      ul.appendChild(li);
-    } else {
-      li.className = "directory";
-      li.innerHTML = `<i class="fa-solid fa-folder"></i> ${key}`;
-      const nestedUl = document.createElement("ul");
-      renderFileTree(node, nestedUl, newPath);
-      li.appendChild(nestedUl);
-      li.addEventListener("click", (e) => {
-        e.stopPropagation();
-        li.classList.toggle("open");
-      });
-      ul.appendChild(li);
+    parentElement.innerHTML = "";
+    const ul = document.createElement("ul");
+    const sortedKeys = Object.keys(tree).sort((a, b) => {
+      const aIsFile = tree[a]._isFile;
+      const bIsFile = tree[b]._isFile;
+      if (aIsFile === bIsFile) return a.localeCompare(b);
+      return aIsFile ? 1 : -1;
+    });
+    for (const key of sortedKeys) {
+      const node = tree[key];
+      const li = document.createElement("li");
+      const newPath = `${currentPath}/${key}`;
+      if (node._isFile) {
+        li.innerHTML = `<i class="fa-solid fa-file-audio"></i> ${key}`;
+        li.setAttribute("draggable", true);
+        li.addEventListener("click", (e) => {
+          e.stopPropagation();
+          playSample(newPath, null);
+        });
+        li.addEventListener("dragstart", (e) => {
+          e.dataTransfer.setData("text/plain", newPath);
+          e.dataTransfer.effectAllowed = "copy";
+        });
+        ul.appendChild(li);
+      } else {
+        li.className = "directory";
+        li.innerHTML = `<i class="fa-solid fa-folder"></i> ${key}`;
+        const nestedUl = document.createElement("ul");
+        renderFileTree(node, nestedUl, newPath);
+        li.appendChild(nestedUl);
+        li.addEventListener("click", (e) => {
+          e.stopPropagation();
+          li.classList.toggle("open");
+        });
+        ul.appendChild(li);
+      }
     }
-  }
-  parentElement.appendChild(ul);
+    parentElement.appendChild(ul);
 }
 
 export async function showOpenProjectModal() {
-  const openProjectModal = document.getElementById("open-project-modal");
-  const serverProjectsList = document.getElementById("server-projects-list");
-  serverProjectsList.innerHTML = "<p>Carregando...</p>";
-  openProjectModal.classList.add("visible");
-  try {
-    const response = await fetch("metadata/mmp-manifest.json");
-    if (!response.ok)
-      throw new Error("Arquivo mmp-manifest.json não encontrado.");
-    const projects = await response.json();
-
-    serverProjectsList.innerHTML = "";
-    if (projects.length === 0) {
-      serverProjectsList.innerHTML =
-        '<p style="color:var(--text-dark);">Nenhum projeto encontrado no servidor.</p>';
-    }
-
-    projects.forEach((projectName) => {
-      const projectItem = document.createElement("div");
-      projectItem.className = "project-item";
-      projectItem.textContent = projectName;
-      projectItem.addEventListener("click", async () => {
-        const success = await loadProjectFromServer(projectName);
-        if (success) {
-          closeOpenProjectModal();
-        }
+    const openProjectModal = document.getElementById("open-project-modal");
+    const serverProjectsList = document.getElementById("server-projects-list");
+    serverProjectsList.innerHTML = "<p>Carregando...</p>";
+    openProjectModal.classList.add("visible");
+    try {
+      const response = await fetch("metadata/mmp-manifest.json");
+      if (!response.ok)
+        throw new Error("Arquivo mmp-manifest.json não encontrado.");
+      const projects = await response.json();
+  
+      serverProjectsList.innerHTML = "";
+      if (projects.length === 0) {
+        serverProjectsList.innerHTML =
+          '<p style="color:var(--text-dark);">Nenhum projeto encontrado no servidor.</p>';
+      }
+  
+      projects.forEach((projectName) => {
+        const projectItem = document.createElement("div");
+        projectItem.className = "project-item";
+        projectItem.textContent = projectName;
+        projectItem.addEventListener("click", async () => {
+          const success = await loadProjectFromServer(projectName);
+          if (success) {
+            closeOpenProjectModal();
+          }
+        });
+        serverProjectsList.appendChild(projectItem);
       });
-      serverProjectsList.appendChild(projectItem);
-    });
-  } catch (error) {
-    console.error("Erro ao carregar lista de projetos:", error);
-    serverProjectsList.innerHTML = `<p style="color:var(--accent-red);">${error.message}</p>`;
-  }
+    } catch (error) {
+      console.error("Erro ao carregar lista de projetos:", error);
+      serverProjectsList.innerHTML = `<p style="color:var(--accent-red);">${error.message}</p>`;
+    }
 }
-
+  
 export function closeOpenProjectModal() {
-  const openProjectModal = document.getElementById("open-project-modal");
-  openProjectModal.classList.remove("visible");
-}
+    const openProjectModal = document.getElementById("open-project-modal");
+    openProjectModal.classList.remove("visible");
+}

assets/js/creations/utils.js

@@ -1,12 +1,16 @@
 // js/utils.js
 
 export function getTotalSteps() {
+  const barsInput = document.getElementById("bars-input");
   const compassoAInput = document.getElementById("compasso-a-input");
   const compassoBInput = document.getElementById("compasso-b-input");
+
+  const numberOfBars = parseInt(barsInput.value, 10) || 1;
   const beatsPerBar = parseInt(compassoAInput.value, 10) || 4;
   const noteValue = parseInt(compassoBInput.value, 10) || 4;
   const subdivisions = Math.round(16 / noteValue);
-  return beatsPerBar * subdivisions;
+  
+  return numberOfBars * beatsPerBar * subdivisions;
 }
 
 export function enforceNumericInput(event) {
@@ -24,4 +28,4 @@ export function adjustValue(inputElement, step) {
 
   // Dispara um evento 'input' para que outros listeners (como o que redesenha o sequenciador) sejam acionados.
   inputElement.dispatchEvent(new Event("input", { bubbles: true }));
-}
+}