Me gustaría reproducir audio desde un socket web que envía paquetes de datos de sonido de longitud total desconocida. La reproducción debe comenzar tan pronto como llegue el primer paquete y no debe ser interrumpida por nuevos paquetes.
Lo que he hecho hasta ahora:
ws.onmessage = e => { const soundDataBase64 = JSON.parse(e.data); const bytes = window.atob(soundDataBase64); const arrayBuffer = new window.ArrayBuffer(bytes.length); const bufferView = new window.Uint8Array(arrayBuffer); for (let i = 0; i < bytes.length; i++) { bufferView[i] = bytes.charCodeAt(i); } const blob = new Blob([arrayBuffer], {"type": "audio/mp3"}); const objectURL = window.URL.createObjectURL(blob); const audio = document.createElement("audio"); audio.src = objectURL; audio.controls = "controls"; document.body.appendChild(audio); }; Sin embargo, que yo sepa, no es posible extender el tamaño de ArrayBuffer y Uint8Array . Tendría que crear un nuevo blob, URL de objeto y asignarlo al elemento de audio. Pero supongo que esto interrumpiría la reproducción de audio.
En la página de MDN de<audio> , hay una pista sobre MediaStream , que parece prometedora. Sin embargo, no estoy muy seguro de cómo escribir datos en un flujo de medios y cómo conectar el flujo de medios a un elemento de audio.
¿Actualmente es posible con JS escribir algo como una tubería donde puedo ingresar datos en un extremo, que luego se transmite a un consumidor? ¿Cómo se lograría una transmisión continua en JS (preferiblemente sin una gran cantidad de código de microgestión)?
Como señaló @Kaiido en los comentarios, puedo usar el objeto MediaSource . Después de conectar un objeto MediaSource a un elemento <audio> en el DOM, puedo agregar un SourceBuffer a un objeto MediaSource abierto y luego agregar ArrayBuffer s al SourceBuffer .
Ejemplo:
const ws = new window.WebSocket(url); ws.onmessage = _ => { console.log("Media source not ready yet... discard this package"); }; const mediaSource = new window.MediaSource(); const audio = document.createElement("audio"); audio.src = window.URL.createObjectURL(mediaSource); audio.controls = true; document.body.appendChild(audio); mediaSource.onsourceopen = _ => { const sourceBuffer = mediaSource.addSourceBuffer("audio/mpeg"); // mpeg appears to not work in Firefox, unfortunately :( ws.onmessage = e => { const soundDataBase64 = JSON.parse(e.data); const bytes = window.atob(soundDataBase64); const arrayBuffer = new window.ArrayBuffer(bytes.length); const bufferView = new window.Uint8Array(arrayBuffer); for (let i = 0; i < bytes.length; i++) { bufferView[i] = bytes.charCodeAt(i); } sourceBuffer.appendBuffer(arrayBuffer); }; }; Probé esto con éxito en Google Chrome 94. Desafortunadamente, en Firefox 92, el audio/mpeg tipo MIME parece no funcionar. Allí aparece el error Uncaught DOMException: MediaSource.addSourceBuffer: Type not supported in MediaSource y la advertencia Cannot play media. No decoders for requested formats: audio/mpeg .