React-speech-kit 사용하기

소개

OpenAI에서 제공하는 여러 기능 중 TTS(Text-To-Speech) 기능을 알아보자.

 

STT는 Audio API에서 제공한다.

 

도대체 이런걸 어디에 활용하면 좋을까 생각해봤는데, openAI에서 예시로 언급한 게 있어서 정리하면 :

- 블로그 포스트 읽어주기

- 다양한 언어로 말하기

- 스트리밍으로 실시간 오디오 만들기

등 다양한 작업에 활용할 수 있다고 한다.

 

목소리 유형은 6개 있는데 그냥 각자 취향에 따라 선택하면 된다.

 

시작하기

`speech`는 3가지 인풋값이 필요한데, 1) 모델명, 2)발음할 텍스트, 그리고 3)목소리 유형이다. 

 

기본적인 코드는 이렇다.

 

openAI 인스턴스를 만들고 파일을 생성한 뒤 3가지 인풋을 넣어서 mp3 변수에 저장한 뒤, 이를 버퍼 파일로 저장한다. 

 

const OpenAI = require('openai');
const fs = require('fs');
const path = require('path');
const { apikey } = require('./api-key');

const openai = new OpenAI({
  apiKey: apikey,
});

const speechFile = path.resolve('./speech.mp3');

async function main() {
  const mp3 = await openai.audio.speech.create({
    model: 'tts-1',
    voice: 'alloy',
    input: 'Today is a wonderful day to build something people love!',
  });
  console.log(speechFile);
  const buffer = Buffer.from(await mp3.arrayBuffer());
  await fs.promises.writeFile(speechFile, buffer);
}
main();

apikey는 openAI에서 발급받아서 넣으면 된다. 이렇게 실행하니 예상했던대로 mp3 파일로 저장이된다. 

 

아 그런데 사실 내가 이걸 그냥 node에서 하는게 아니라 React에서 speech를 하고 싶은 것이었다. 서버에서 외쳐봤자 무의미하잖아.

 

react-speech-kit

react에는 react-speech-kit이라는 간단한 패키지로 TTS 기능을 구현할 수 있다. 다만, 목소리 퀄리티는 떨어지니 더 자연스러운 사람 목소리를 원한다면 구글이나 다른 TTS 서비스 api를 사용하는 것이 좋겠다.

import { useState } from 'react';
import { useSpeechSynthesis } from 'react-speech-kit';

const TestSpeak = () => {
  const [text, setText] = useState('');
  const { speak } = useSpeechSynthesis();

  const handleSpeak = () => {
    if (text) {
      speak({ text });
    }
  };

  return (
    <div>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter text to speak"
        rows="4"
        cols="30"
      />
      <button onClick={handleSpeak}>Speak</button>
    </div>
  );
};
export default TestSpeak;