Arrumando o timmer da pattern

assets/js/creations/audio.js

@@ -6,6 +6,8 @@ import { getTotalSteps } from "./utils.js";
 let audioContext;
 let mainGainNode;
 
+const timerDisplay = document.getElementById('timer-display');
+
 export function getAudioContext() {
   return audioContext;
 }
@@ -24,6 +26,14 @@ export function initializeAudioContext() {
   }
 }
 
+function formatTime(milliseconds) {
+  const totalSeconds = Math.floor(milliseconds / 1000);
+  const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0');
+  const seconds = (totalSeconds % 60).toString().padStart(2, '0');
+  const centiseconds = Math.floor((milliseconds % 1000) / 10).toString().padStart(2, '0');
+  return `${minutes}:${seconds}:${centiseconds}`;
+}
+
 export function playMetronomeSound(isDownbeat) {
   initializeAudioContext();
   const oscillator = audioContext.createOscillator();
@@ -42,38 +52,32 @@ export function playMetronomeSound(isDownbeat) {
   oscillator.stop(audioContext.currentTime + 0.05);
 }
 
-// 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 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 trilha não tiver o buffer carregado, não toca
   if (!track.audioBuffer) {
     console.warn(`Buffer para a trilha ${track.name} ainda não carregado.`);
     return;
   }
 
-  // Cria uma fonte de áudio leve a partir do buffer
   const source = audioContext.createBufferSource();
   source.buffer = track.audioBuffer;
 
-  // Conecta na cadeia de áudio da trilha (respeitando volume e pan)
   if (track.gainNode) {
     source.connect(track.gainNode);
   } else {
-    source.connect(mainGainNode); // Fallback
+    source.connect(mainGainNode);
   }
 
-  // Toca o som imediatamente
   source.start(0);
 }
 
@@ -87,6 +91,13 @@ function tick() {
     appState.currentStep === 0 ? totalSteps - 1 : appState.currentStep - 1;
   highlightStep(lastStepIndex, false);
 
+  const bpm = parseInt(document.getElementById("bpm-input").value, 10) || 120;
+  const stepInterval = (60 * 1000) / (bpm * 4);
+  const currentTime = appState.currentStep * stepInterval;
+  if (timerDisplay) {
+    timerDisplay.textContent = formatTime(currentTime);
+  }
+
   if (appState.metronomeEnabled) {
     const noteValue =
       parseInt(document.getElementById("compasso-b-input").value, 10) || 4;
@@ -128,6 +139,9 @@ export function stopPlayback() {
   appState.isPlaying = false;
   highlightStep(appState.currentStep - 1, false);
   appState.currentStep = 0;
+  
+  if (timerDisplay) timerDisplay.textContent = '00:00:00';
+
   document.getElementById("play-btn").classList.remove("fa-pause");
   document.getElementById("play-btn").classList.add("fa-play");
 }
@@ -135,6 +149,7 @@ export function stopPlayback() {
 export function rewindPlayback() {
   appState.currentStep = 0;
   if (!appState.isPlaying) {
+    if (timerDisplay) timerDisplay.textContent = '00:00:00';
     document
       .querySelectorAll(".step.playing")
       .forEach((s) => s.classList.remove("playing"));