Data mp3 broken open ai text to speech

Ask us anything How do I?
1

Hi everyone, I’m using the open ai text to speech api but it seems that the result is broken. It gives weird characters and it’s unreadable, normally it’s an mp3 file. Does anyone have a solution?

image
image2560×1198 381 KB

image
image564×582 22.4 KB

2

You probably receiving the raw data, the file binaries. You will have to make some research about how data is returned by openapi and how to use them with javascript.

I also see you enabled proxy on the request, I’m not sure you need this. Its only useful to request an API which doesn’t allow external website to use them directly from a browser.

3

I tried this but its not working, the js code is working but i have no result and no audio playing

const rawData = context.workflow['4f6fa5bc-b8e9-45da-b87c-545be69b039c'].result;

function playAudioFromRawData(rawData) {
    // Créez un Blob à partir des données binaires
    const audioBlob = new Blob([rawData], { type: 'audio/mp3' }); // Assurez-vous que le type MIME est correct
    // Créez une URL à partir du Blob
    const audioUrl = URL.createObjectURL(audioBlob);
    // Créez un nouvel élément audio et définissez son URL source
    const audio = new Audio(audioUrl);
    // Jouez l'audio
    audio.play();
}

// Utilisez la fonction avec les données binaires reçues
playAudioFromRawData(rawData);
4

Hello Alexis, I’ve looked everywhere and I can’t find the solution, and I’ve tested several api that return audio and it always gives a raw binary, it’s not just text to speech from open ai. Any api that returns sound on the web gives unreadable characters as a result. Do you have a solution for that? Thank you!

5

What do you expect to get ? You see unreadable characters in the UI because its not displayable, that’s all.

I found this, maybe it can help you => javascript - how to convert raw mp3 binary into blob url and play it in audio tag - Stack Overflow
AudioBuffer - Web APIs | MDN

Try to ask chatgpt a script to call the API you want and play the audio file returned

6

I excepted to have a result like “title.mp3” that’s all. And I’ve already tested these javascript codes, they don’t work. On bubble the data is readable on weweb no.

7

The readability on the UI doesn’t affect how it works, we display the raw data instead of a nice label but under the hood it’s the same data fetched from the same API.

Please, could you try something like

const rawData = context.workflow['4f6fa5bc-b8e9-45da-b87c-545be69b039c'].result;
const audioContext = new AudioContext();
const arr = Uint8Array.from(rawData)
const audio = await audioContext.decodeAudioData(arr.buffer);
const source = audioContext.createBufferSource();
source.buffer = audio;
source.connect(audioContext.destination);
source.start(0);
1 Like
8

Thank you for your response, i have this error "name: “EncodingError”
stack: “Error: Failed to execute ‘decodeAudioData’ on ‘BaseAudioContext’: Unable to decode audio data”

I also want to make it clear that my aim isn’t just to have a nice title, but to be able to read the data, because when I put the raw data into an html audio player, for example, there’s an error saying that it’s unreadable.

image
image2560×1223 347 KB

9

Hey,
Experiencing issues with the open AI text to speech API can be frustrating. To troubleshoot, ensure your input text is formatted correctly and consider reaching out to OpenAI’s support for assistance. It might be helpful to double-check your API parameters and ensure compatibility with the expected mp3 format.
You can also explore other AI text to speech solutions alternatively.

10 
const response = await fetch("https://api.openai.com/v1/audio/speech", {
  method: "POST",
  headers: {
    Authorization: "Bearer key",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    model: "tts-1",
    input: "Today is a wonderful day to build something people love!",
    voice: "alloy",
  }),
});

if (!response.ok) throw new Error(`Server returned ${response.status}`);

const audioBlob = await response.blob();
const audioUrl = URL.createObjectURL(audioBlob);

const audio = new Audio(audioUrl);
audio.play();
1 Like