I am attempting to stream an .acc audio file using the MediaSource API in JavaScript. The problem I'm encountering is that after loading the first partial audio chunk into the media source buffer, the audio starts playing. However, when I try to append another partial chunk to the source buffer, the playback freezes, and I receive an error with the new Audio() variable on the second partial playback.
mediaSource.addEventListener("sourceopen", async () => {
source = mediaSource.addSourceBuffer(chunks.aac.mime); // audio/aac
// first segment of audio buffer
const arrayBuffer = await fetchDecode(
chunks.aac.url, //audio url
chunks.aac.segments()[0] // range bytes of partial
);
// adding first partial of audio in source
source.appendBuffer(arrayBuffer);
segmentsFetched++;
chunkDecodedBlock.innerHTML = `Chunks Decoded: ${segmentsFetched}/${
chunks.aac.segments().length
}`;
audio.addEventListener("error", (event) => {
// this throws error when second partial playback must start but it doesn't
console.error("Audio element error:", event);
});
});
//this update buffer runs after clicking play button
const updateBuffer = async () => {
// if all segmets got fetched stop updateBuffer
if (segmentsFetched === chunks.aac.segments().length) return;
// get other segments of audio
const arrayBuffer = await fetchDecode(
chunks.aac.url,
chunks.aac.segments()[segmentsFetched]
);
source.appendBuffer(arrayBuffer);
segmentsFetched++;
};
chunks.aac.segments()[0] is array of bytes which audio parts should I get
segments looks like this
[
[0, 1234],
[1235, 2323]
...
]
playback works fine with the mp3 format, I'm encountering a problem during segment transitions. Specifically, there is a noticeable distortion in the audio when transitioning to the next segment. I suspect that this issue might be due to the inherent drawbacks of the mp3 format, given its imperfect structure and lossy compression nature
