Web Audio API: Occasional Skipped Audio Chunks When Playing Real-Time Stream in VueJS App
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: