Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

134
Views
Transmisión al elemento <audio>

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)?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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 .

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!