OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Web Audio API: Occasional Skipped Audio Chunks When Playing Real-Time Stream in VueJS App

  • Thread starter Thread starter Humming_Bird
  • Start date Start date
H

Humming_Bird

Guest
I'm working on a VueJS web application that receives audio data through a WebSocket and plays it in real-time using the Web Audio API. The audio data is sent as base64-encoded chunks which I decode and append to a SourceBuffer in a MediaSource. The problem I'm facing is that occasionally, when the duration of audio is shorter, the audio chunks are received but not played immediately. When the next set of audio chunks is received, the previously skipped audio starts playing, followed by the new audio chunks. Here is the code I am using to set up the audio playback in my component:

Code:
initAudioSetup() {
      this.mediaSource = new MediaSource();
      const audioElement = document.getElementById("audio");
      audioElement.src = URL.createObjectURL(this.mediaSource);


      this.mediaSource.addEventListener("sourceopen", () => {
        this.sourceBuffer = this.mediaSource.addSourceBuffer("audio/mpeg");


        let queue = [];
        let isUpdating = false;


        const processQueue = () => {
          if (queue.length > 0 && !isUpdating) {
            console.log("PROCESSING QUEUE");
            isUpdating = true;


            this.sourceBuffer.appendBuffer(queue.shift());
          }
        };


        this.sourceBuffer.addEventListener("updateend", () => {
          isUpdating = false;
          processQueue();
        });


        // Listen for new audio chunks
        window.addEventListener("newAudioChunk", (event) => {
          const chunk = event.detail;
          const binaryString = atob(chunk);
          const len = binaryString.length;
          const bytes = new Uint8Array(len);
          for (let i = 0; i < len; i++) {
            bytes[i] = binaryString.charCodeAt(i);
          }
          queue.push(bytes);
          processQueue();
        });
        window.addEventListener("endOfAudio", () => {
          console.log("end of audio");
         
          console.log(this.mediaSource.sourceBuffers);
        });
      });
      audioElement.play();
    }

Audio data is received through a WebSocket and dispatched as newAudioChunk events. Each chunk is base64-decoded and converted to a Uint8Array before being appended to the SourceBuffer.Occasionally, received audio chunks are not played immediately. Instead, they play only after new chunks are received.What could be causing these audio chunks to be skipped initially and then played later?

<p>I'm working on a VueJS web application that receives audio data through a WebSocket and plays it in real-time using the Web Audio API. The audio data is sent as base64-encoded chunks which I decode and append to a SourceBuffer in a MediaSource.
The problem I'm facing is that occasionally, when the duration of audio is shorter, the audio chunks are received but not played immediately. When the next set of audio chunks is received, the previously skipped audio starts playing, followed by the new audio chunks.
Here is the code I am using to set up the audio playback in my component:</p>
<pre><code>initAudioSetup() {
this.mediaSource = new MediaSource();
const audioElement = document.getElementById("audio");
audioElement.src = URL.createObjectURL(this.mediaSource);


this.mediaSource.addEventListener("sourceopen", () => {
this.sourceBuffer = this.mediaSource.addSourceBuffer("audio/mpeg");


let queue = [];
let isUpdating = false;


const processQueue = () => {
if (queue.length > 0 && !isUpdating) {
console.log("PROCESSING QUEUE");
isUpdating = true;


this.sourceBuffer.appendBuffer(queue.shift());
}
};


this.sourceBuffer.addEventListener("updateend", () => {
isUpdating = false;
processQueue();
});


// Listen for new audio chunks
window.addEventListener("newAudioChunk", (event) => {
const chunk = event.detail;
const binaryString = atob(chunk);
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes = binaryString.charCodeAt(i);
}
queue.push(bytes);
processQueue();
});
window.addEventListener("endOfAudio", () => {
console.log("end of audio");

console.log(this.mediaSource.sourceBuffers);
});
});
audioElement.play();
}
</code></pre>
<p>Audio data is received through a WebSocket and dispatched as newAudioChunk events.
Each chunk is base64-decoded and converted to a Uint8Array before being appended to the SourceBuffer.Occasionally, received audio chunks are not played immediately. Instead, they play only after new chunks are received.What could be causing these audio chunks to be skipped initially and then played later?</p>
 

Latest posts

Top