Why does TTS work on small text but gives out error on larger text

I’m working on voice chatbot, everything works fine, but when the response is 2 or more paragraph it throughs out an error “There was an error with the text-to-speech request: Error: HTTP error! status: 504
at textToSpeech”. I used openAI TTS API, it’s online voicebot i’m developing so the code is in JS.

  async function textToSpeech(text) {
  const endpoint = 'https://server.com/api/openaiProxy';
  try {
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      body: JSON.stringify({
        type: 'tts', // Indicate that this is a TTS request
        data: { // Data for the TTS request
          model: "tts-1",
          voice: "alloy",
          input: text

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    const audioData = await response.blob();
    // Play the audio blob with an audio element
    const audioUrl = URL.createObjectURL(audioData);
    const audio = new Audio(audioUrl);
      programmaticRestart = false;
       // Update the UI to reflect that the assistant has finished speaking
      audio.onended = () => {
         if (!manuallyStopped) {
             console.log("voice message end.");
  } catch (error) {
    console.error('There was an error with the text-to-speech request:', error);

504 is Gateway timeout error. perhaps your backend server is timing out waiting for tts response. can you verify in your code if the error is from your server or openai api? if openai api is timing out, you can set the timeout and retry, if you have not yet done it.

I had this issue with streaming a response from the chat.completions endpoint a while back. Solved it by running in a seperate thread, however since this is running on the main thread it shouldn’t make a difference…?