diff --git a/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-polly/index.mdx b/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-polly/index.mdx index ccd7697d650..3956be5bacc 100644 --- a/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-polly/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-polly/index.mdx @@ -218,6 +218,7 @@ Amplify.configure(outputs); Example frontend code to create an audio buffer for playback using a text input. + ```ts title="App.tsx" import "./App.css"; import { generateClient } from "aws-amplify/api"; @@ -267,4 +268,53 @@ function App() { export default App; ``` + + +```ts title="app.component.ts" +import { Component } from '@angular/core'; +import { generateClient } from 'aws-amplify/api'; +import type { Schema } from '../../../amplify/data/resource'; +import { getUrl } from 'aws-amplify/storage'; + +const client = generateClient(); + +type PollyReturnType = Schema['convertTextToSpeech']['returnType']; + +@Component({ + selector: 'app-root', + template: ` +
+ + + Get audio file +
+ `, + styleUrls: ['./app.component.css'], +}) +export class App { + src: string = ''; + file: PollyReturnType = ''; + + async synthesize() { + const { data, errors } = await client.mutations.convertTextToSpeech({ + text: 'Hello World!', + }); + + if (!errors && data) { + this.file = data; + } else { + console.log(errors); + } + } + + async fetchAudio() { + const res = await getUrl({ + path: 'public/' + this.file, + }); + + this.src = res.url.toString(); + } +} +``` +