48 lines
1.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
// 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();
|
|
} |