correccion VAD en formato binario pcm16 - agrego transcripcion al live

This commit is contained in:
2025-08-01 21:22:11 +00:00
parent e43a8c01a7
commit 976e350436
11 changed files with 133 additions and 123 deletions

View File

@ -4,7 +4,6 @@ export const VadHook = {
async mounted() {
const statusDiv = document.getElementById("vad-status");
// Cargar onnxruntime y luego vad-web
const ortScript = document.createElement("script");
ortScript.src = "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.14.0/dist/ort.js";
@ -13,7 +12,6 @@ export const VadHook = {
ortScript.onload = () => {
vadScript.onload = async () => {
// Inicializar canal Phoenix
this.socket = new Socket("ws://localhost:4003/socket");
this.socket.connect();
this.channel = this.socket.channel("audio:lobby");
@ -21,40 +19,32 @@ export const VadHook = {
console.log("✅ Canal audio:lobby unido.");
});
// Preparar VAD pero no arrancar aún
this.myvad = await vad.MicVAD.new({
const myvad = await vad.MicVAD.new({
onSpeechStart: () => {
statusDiv.textContent = "🎤 Voz detectada...";
},
onSpeechEnd: async (float32Audio) => {
statusDiv.textContent = "✅ Voz finalizada. Enviando audio...";
// Enviar el audio correctamente formateado
await sendAudioChunk(float32Audio, this.channel);
// Indicar stop si querés (como payload vacío JSON)
this.channel.push("stop_audio", {});
}
});
// Esperar eventos desde LiveView
this.handleEvent("init-vad", async () => {
await this.myvad.start();
statusDiv.textContent = "🚀 VAD iniciado.";
});
this.handleEvent("stop-vad", async () => {
if (this.myvad) {
await this.myvad.stop();
statusDiv.textContent = "🛑 VAD detenido.";
}
});
myvad.start();
statusDiv.textContent = "🚀 VAD iniciado.";
};
document.body.appendChild(vadScript);
};
document.body.appendChild(ortScript);
}
};
// Convertir Float32Array a PCM 16-bit
// Función de helper para enviar el chunk
function float32ToInt16(float32Array) {
const int16Array = new Int16Array(float32Array.length);
for (let i = 0; i < float32Array.length; i++) {
@ -64,16 +54,24 @@ function float32ToInt16(float32Array) {
return int16Array;
}
// Enviar audio binario al canal
async function sendAudioChunk(float32Audio, channel) {
const pcm16 = float32ToInt16(float32Audio);
const header = JSON.stringify({ sample_rate: 16000 });
const headerBytes = new TextEncoder().encode(header);
const totalLength = 2 + headerBytes.length + pcm16.byteLength;
const audioBytes = new Uint8Array(pcm16.buffer); // same as merged in el otro ejemplo
const totalLength = 2 + headerBytes.length + audioBytes.length;
const buffer = new ArrayBuffer(totalLength);
const view = new DataView(buffer);
view.setUint16(0, headerBytes.length, true);
// Encabezado: longitud en big endian
view.setUint16(0, headerBytes.length, false); // <== big endian
// Copiar header y audio al buffer
new Uint8Array(buffer, 2, headerBytes.length).set(headerBytes);
new Uint8Array(buffer, 2 + headerBytes.length).set(new Uint8Array(pcm16.buffer));
channel.pushBinary(buffer);
new Uint8Array(buffer, 2 + headerBytes.length).set(audioBytes);
// Enviar el buffer binario
channel.push("audio_chunk", buffer);
console.log("📤 Chunk binario enviado");
}