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

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();
+}