2

I have to send audio stream from microphone with websocket as wav format, during convert convert audio buffer array to wav I get this error:

DOMException: Failed to execute 'decodeAudioData' on 'BaseAudioContext': Unable to decode audio data

I tried javascript-processor-node for this but it was deprecated, I think audio worklet for sending simple converted format on websocket stream is too much for task like this!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body id="body">
    <button id="button">test</button>

    <script defer>
      const btn = document.getElementById("button");

      btn.addEventListener("click", () => {
        navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
          const recorder = new MediaRecorder(stream);
          recorder.start(10);

          recorder.addEventListener("dataavailable", (event) => {
            const streamBlob = new Blob([event.data]);

            streamBlob
              .arrayBuffer()
              .then((arrayBuffer) => {
                const audioCtx = new AudioContext({ sampleRate: 16000 });
                audioCtx
                  ?.decodeAudioData(arrayBuffer)
                  ?.then((buffer) => {
                    console.log("  ?.then  wavBlob", buffer);
                  })
                  .catch((error) => {
                    console.log("  .  error1", error);
                  })
                  .finally(() => {});
              })
              .catch((error) => {
                console.log("  .  error2", error);
              });
          });
        }),
          function (e) {
            alert("Error capturing audio.");
          };
      });
    </script>
  </body>
</html>
Mohamad Ahmadi
  • 248
  • 2
  • 7
  • 1
    The question should be updated to include the shortest code necessary to reproduce the problem. A screenshot of code is unhelpful. – Yogi Jan 12 '23 at 19:38
  • 1
    I added code snippet but I think its not working with stack overflow microphone premition – Mohamad Ahmadi Jan 12 '23 at 20:10
  • 1
    Your code is configured to repeatedly generate 10 millisecond audio clips. I was able to make it work by increasing the time to 5000 milliseconds, i.e., start(5000) Yet, the code has multiple other problems that may make it unusable for your application. You may want to review the [MDN Web Audio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) documentation and examples. A good starting point is this [example](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API#a_sample_application_web_dictaphone) recorder. – Yogi Jan 13 '23 at 00:38
  • 1
    I don't think you can make your current design work. See these related questions for alternatives: [Stream realtime audio over socket.io](https://stackoverflow.com/a/69314775/943435) and [AudioContext, getUserMedia, and websockets audio streaming](https://stackoverflow.com/questions/67118642/audiocontext-getusermedia-and-websockets-audio-streaming) – Yogi Jan 13 '23 at 08:08

0 Answers0