OpenAI Text to Speech API | React Js | Node Js | Material UI Project

Sdílet
Vložit
  • čas přidán 7. 09. 2024

Komentáře • 11

  • @AsihanKhang
    @AsihanKhang Před 2 měsíci +1

    that's great tutorial! would it be nice if generated audio playback directly from the browser. Could that be possible? thx

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376  Před 2 měsíci

      Hello, Thanks for reaching out.
      Yes It is possible. I have made some minor changes on Frontend code to play the audio in the browser when audio is generated. Check this out on GitHub.
      github.com/MitterYourTechMate/texttoaudioreact
      Hope this will help !

  • @vighneshhegde4580
    @vighneshhegde4580 Před 3 měsíci +1

    Hello, I am working on a project where I am trying to integrate this OpenAI API into my application. I followed this and got an error that 'OpenAIError: The OPENAI_API_KEY environment variable is missing or empty; either provide it, or instantiate the OpenAI client with an apiKey option, like new OpenAI({ apiKey: 'My API Key' }).'. I have created my API key from their website. I am still getting this error. Below is my code for this. Please help me with this.
    (This is my controller's folder)
    export const speechToText= catchAsyncError(async (req,res,next)=>{
    const {text}=req.body;
    const buffer=await convert(text);

    res.json({buffer});
    })
    (This is my utils folder)
    import fs from "fs";
    import path from "path";
    import OpenAI from "openai";
    import dotenv from 'dotenv';
    dotenv.config();
    const openai = new OpenAI({apikey:process.env.OPENAI_API_KEY});
    const speechFile = path.resolve("./speech.mp3");
    export const convert=async (text)=>{
    const mp3 = await openai.audio.speech.create({
    model: "tts-1",
    voice: "alloy",
    input: text,
    });
    // console.log(speechFile);
    const buffer = Buffer.from(await mp3.arrayBuffer());
    await fs.promises.writeFile(speechFile, buffer);
    return buffer;
    }

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376  Před 3 měsíci

      Hello, Thanks for reaching out. Most probable error in your code is that, you are passing API key as "apikey", try passing it with K in caps, "apiKey". I hope this helps. Also, please make sure env variables are reading properly, you can check it by console.log(process.env.OPENAI_API_KEY)

    • @vighneshhegde4580
      @vighneshhegde4580 Před 3 měsíci

      @@mitter-yourtechmate4376 Yes, I figured that out. Thanks! Also, it would be helpful if you could make a video on how to stream the audio to the frontend.

  • @md.nayemkhan7936
    @md.nayemkhan7936 Před 3 měsíci +1

    Thank you❤

  • @smtabatabaie
    @smtabatabaie Před 3 měsíci +1

    Thanks, is there any way to stream the audio to the front-end so it will be more real-time?

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376  Před 3 měsíci +1

      Hello, yes, It's definitely possible, try returning buffer in JSON format from backend res.json(buffer) and on the front end, you can try to stream it using audio tag. I'll try to cover it in another video.

  • @adarshsocialgroup8097
    @adarshsocialgroup8097 Před 2 měsíci

    Same audio file not opening in front end

    • @mitter-yourtechmate4376
      @mitter-yourtechmate4376  Před 2 měsíci

      Hello,
      Thanks for reaching out
      Try to pull the code from this repo, to compare if you have made any error on the frontend.
      github.com/MitterYourTechMate/texttoaudioreact
      you can also check other video where I created better version of this project, which might also help.
      czcams.com/video/djqi9PTuIGQ/video.html