I've integrated Supabase storage for storing audio blobs. After retrieving the blob from an API call, it is uploaded successfully to the storage bucket. However, when attempting to play the audio file, nothing happens and the duration shows as 0:00. Strangely, manually uploading an mp3 file displays a proper duration like 1:29 and plays without issues. Below is the code snippet responsible for this functionality. I'm keen on saving these blobs to a database to avoid unnecessary API calls.
const getAudio = async (message) => {
console.log("called");
const data = {
text: "hi",
voice_settings: {
stability: 0,
similarity_boost: 0,
},
};
const config = {
headers: {
"xi-api-key": process.env.API_KEY,
},
responseType: "blob",
};
try {
const voiceResponse = await axios.post(
"https://api.elevenlabs.io/v1/text-to-speech/XXXXXXXXXXX",
data,
config
);
console.log(voiceResponse.data);
blob = new Blob([voiceResponse.data], { type: "audio/mpeg" });
console.log("=========================================");
console.log(blob);
const response = await supabase.storage
.from("audio_blobs")
.upload(email + "/" + "audio.mp3", blob, {
contentType: "audio/mpeg",
});
if (response.error) {
console.log(response.error);
} else {
console.log("success");
}
} catch (err) {
console.log(err);
}
}; getAudio()