Theo's Typesafe Cult•5mo ago

Upload a buffer to UploadThing?

Hello! I'm trying to upload an audio file but it is in the form of a buffer, I'm not really sure where to go from here. Here's my code:

const data = {
    model_id: "eleven_monolingual_v1",
    text,
    voice_settings: {
      similarity_boost: 0.5,
      stability: 0.5,
    },
  };

  const response = await fetch(
    `https://api.elevenlabs.io/v1/text-to-speech/ThT5KcBeYPX3keUQqHPh`,
    {
      method: "POST",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "xi-api-key": process.env.ELEVEN_LABS_API_KEY!,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    }
  );

  if (!response.ok) {
    throw new Error("Something went wrong");
  }

  const arrayBuffer = await response.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);
  const file = Math.random().toString(20).substring(7);

  fs.writeFile(path.join("public", "audio", `${file}.mp3`), buffer, () => {
    console.log("File written successfully");
  });

const data = {
    model_id: "eleven_monolingual_v1",
    text,
    voice_settings: {
      similarity_boost: 0.5,
      stability: 0.5,
    },
  };

  const response = await fetch(
    `https://api.elevenlabs.io/v1/text-to-speech/ThT5KcBeYPX3keUQqHPh`,
    {
      method: "POST",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "xi-api-key": process.env.ELEVEN_LABS_API_KEY!,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    }
  );

  if (!response.ok) {
    throw new Error("Something went wrong");
  }

  const arrayBuffer = await response.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);
  const file = Math.random().toString(20).substring(7);

  fs.writeFile(path.join("public", "audio", `${file}.mp3`), buffer, () => {
    console.log("File written successfully");
  });

So, I'm generating some audio using the elevenlabs api, and I'm just saving it locally and playing back from there. But of course, this isn't the way to go with a real-world application. I looked around in the documentations for a while but couldn't find an example with a buffer. I'm kind of a beginner still so I don't really know what buffers are either.

1 Reply

triple._.a•5mo ago

I DID IT OMG WHAAAT Solution

// text-to-speech.ts
"use server";

import { utapi } from "@/app/api/uploadthing/route";

export const textToSpeech = async (text: string) => {
  const data = {
    model_id: "eleven_monolingual_v1",
    text,
    voice_settings: {
      similarity_boost: 0.5,
      stability: 0.5,
    },
  };

  const response = await fetch(
    `https://api.elevenlabs.io/v1/text-to-speech/piTKgcLEGmPE4e6mEKli`,
    {
      method: "POST",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "xi-api-key": process.env.ELEVEN_LABS_API_KEY!,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    }
  );

  if (!response.ok) {
    throw new Error("Something went wrong");
  }

  const arrayBuffer = await response.arrayBuffer();
  const blob = new Blob([arrayBuffer], { type: "audio/mpeg" });

  const uploadedFile = await utapi.uploadFiles(blob);

  return {
    data: {
      fileUrl: uploadedFile.data?.url,
    },
  };
};

// text-to-speech.ts
"use server";

import { utapi } from "@/app/api/uploadthing/route";

export const textToSpeech = async (text: string) => {
  const data = {
    model_id: "eleven_monolingual_v1",
    text,
    voice_settings: {
      similarity_boost: 0.5,
      stability: 0.5,
    },
  };

  const response = await fetch(
    `https://api.elevenlabs.io/v1/text-to-speech/piTKgcLEGmPE4e6mEKli`,
    {
      method: "POST",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "xi-api-key": process.env.ELEVEN_LABS_API_KEY!,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    }
  );

  if (!response.ok) {
    throw new Error("Something went wrong");
  }

  const arrayBuffer = await response.arrayBuffer();
  const blob = new Blob([arrayBuffer], { type: "audio/mpeg" });

  const uploadedFile = await utapi.uploadFiles(blob);

  return {
    data: {
      fileUrl: uploadedFile.data?.url,
    },
  };
};

// upload-file.ts
"use server";

import { utapi } from "@/app/api/uploadthing/route";

export async function uploadFile(file: Buffer) {
  const response = await utapi.uploadFiles(file);

  return response.data?.url;
}

// upload-file.ts
"use server";

import { utapi } from "@/app/api/uploadthing/route";

export async function uploadFile(file: Buffer) {
  const response = await utapi.uploadFiles(file);

  return response.data?.url;
}

Gaming

Programming

Upload a buffer to UploadThing?