I’m trying to pass the result of a google text to speech api SynthesizeSpeech.audio_content to frontend throught echo framework (golang).
resp, err := client.SynthesizeSpeech(c.ctx, &req)
if err != nil {
return nil, err
}
c.Blob(http.StatusOK, "audio/mp3", resp.AudioContent)
The audio itself is generated normally (I tried saving it as mp3 on the server and listening to it). But when I’m trying to get the data on the client side this way:
var options = {
url: "/tts",
method: "POST",
contentType: 'application/json',
responseType: 'audio/mp3',
data: JSON.stringify(data),
success: function (response) {
console.log(response.length)
var blob = new Blob([response], { type: 'audio/mp3' });
console.log(blob.size)
var blobUrl = URL.createObjectURL(blob);
var audio = new Audio(blobUrl);
audio.addEventListener('loadeddata', function() {
audio.play();
});
audio.addEventListener('error', function(event) {
console.error('Audio error:', event.target.error.message);
});
audio.load();
},
error: function (xhr, status, error) {
console.log(status, error)
}
}
$.ajax(options);
I get an error: prime.js:221 Audio error: DEMUXER_ERROR_COULD_NOT_OPEN: FFmpegDemuxer: open context failed
It’s also strange that on the server side the size of the byte array before sending is for example 5664, but when I measure the size of response.length I see 5375 besides blob.size is 10591.
I also looked at the analysis in wireshark and noticed that the response was coming to the client quite well. Here it is:
How can we see the size of the received data at the wireshark level even before the browser is 5664 as it should be.
In the browser debugger I see the following data:
It seems that the array is somehow damaged or modified by the browser. What do you guys think?
