I have been developing a small app that records user audio and transfers it to the back-end service using Angular.
Currently, I have successfully created an app where users can record audio, send it, and even download the file to listen for testing purposes.
However, I encountered an issue with larger audio files that exceed 10 seconds in duration. In order to handle this, I implemented code to slice the audio into smaller chunks. While I can segment the audio, store them in an array, and download them individually, I am facing difficulty playing these chunks. Only the first chunk plays, while the others cannot be opened or played.
This is the section of the code where I divide the blob into sub-blobs:
if (this.duration > this.audioLimitBeforeChunking) {
let numChunks = this.duration/this.audioLimitBeforeChunking;
Math.floor(numChunks/1000);
console.log('numChunks is: ', numChunks);
for (let index = 0; index <= numChunks; index++) {
var byteEnd = Math.ceil((size/numChunks) * (index + 1));
this.blobArray.push(blob.slice(this.byteIndex, byteEnd));
this.byteIndex += (byteEnd - this.byteIndex);
}
}
This is where I handle downloading all the sub-blobs:
for (let i = 0; i <= this.blobArray.length; i++) {
this.url = URL.createObjectURL(this.blobArray[i]);
this.audioFile = new File([this.blobArray[i]], "I_like_apples" + i + ".wav");
let postBody = {
'file': this.audioFile,
'user_token': '*******',
'reference_text': '******',
'model_id': '******'
}
console.log("inside sendData() component");
this.httpService.getStatus(postBody).subscribe(
(response:any) => {
console.log(response)
}
)
const a = document.createElement('a');
a.style.display = 'none';
a.href = this.url;
a.download = 'test.wav';
document.body.appendChild(a);
a.click();
}
}
While I can play the first sub-blob, the subsequent ones cannot be opened or played. Any insights on what might be causing this issue? Am I overlooking something in my approach?