Introduction#
GitHub shows how to setup and use amplify text to speech api. Amplify provides many AI/ML services such as text to speed, translation, text identification, etc predictions
Init nextjs project#
npx create-next-app@latest --typescript
add chakra-ui
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion aws-amplify
add amplify
npm i aws-amplify
Amplify init#
amplify init
add auth and choose default with useremail login
amplfy add auth
add predictions and select text to speech for this example
amplify add predictions
Amplify configure in react#
in _app.ts configure amplify
import type { AppProps } from 'next/app'import { ChakraProvider } from '@chakra-ui/react'import { Amplify, Auth, Predictions } from 'aws-amplify'import { AmazonAIPredictionsProvider } from '@aws-amplify/predictions'import awsconfig from './../src/aws-exports'try {Amplify.configure(awsconfig)Amplify.register(Predictions)Amplify.register(Auth)Predictions.addPluggable(new AmazonAIPredictionsProvider())} catch (error) {console.log(error)}function MyApp({ Component, pageProps }: AppProps) {return (<ChakraProvider><Component {...pageProps} /></ChakraProvider>)}
Text to speech#
the ui
import { Text, Box, Input, Textarea, Button } from "@chakra-ui/react";import { Predictions } from "aws-amplify";import { useState } from "react";import { docs } from "data/aws-docs";const TextToSpeech = () => {const [text, setText] = useState(docs.amplify);// amplify text to speech apiconst convert = () => {return ()}return (<Box maxW={"1000px"} margin="auto" marginTop={"100px"}><Textareaplaceholder={text}height={"300px"}marginBottom="20px"overflowY="auto"value={text}backgroundColor={"gray.100"}onChange={(event) => {let inputText = event.target.value;setText(inputText);}}></Textarea><ButtoncolorScheme="green"onClick={() => {convert();}}>Convert To Speech</Button></Box>);};
the amplify text to speech api
const convert = () =>Predictions.convert({textToSpeech: {source: {text: text},voiceId: 'Kimberly'}}).then(result => {const audioCtx = new AudioContext()const source = audioCtx.createBufferSource()audioCtx.decodeAudioData(result.audioStream,buffer => {source.buffer = buffersource.connect(audioCtx.destination)source.start(0)},error => {console.log(error)})})