Syng Yang - by api of elevenlabs텍스트를 보이스로 .. by API

개요

최근에는 TTS 서비스들이, Naver 의 Clova등 비롯하여 많아졌습니다. 사운드를 변환하여, 버튼에 클릭 이벤트로 정적인 서비스 보다는, 동적 서비스를 위해 API를 이용하여 바로 싸이트 내에서 다음 동작으로 연결하려는 목적으로 제작

도구

- Next.js

- Tailwinds

- API of ElevenLabs

구현

- Next.js 의 server action 을 사용하지 않고, api/elevenlabs/route.js 통해서 fetch() 를 사용함

- 파일이름은 const file = Math.random().toString(36).substring(7); 로 만들어서, node/fs.createWriteStream()를 이용하여 저장하고, 성공여부는 useState()와 <audio /> 을 이용하여 확인

- {audio && (
<audio autoPlay controls src={`audio/${audio}`}/>
)}

문제점

- 무료 어카운트를 사용해서 인지, 음질이 떨어짐.