Skip to content

Commit

Permalink
add angular example for polly
Browse files Browse the repository at this point in the history
  • Loading branch information
chrisbonifacio committed Dec 16, 2024
1 parent 742c2a0 commit 5144ff3
Showing 1 changed file with 50 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,7 @@ Amplify.configure(outputs);

Example frontend code to create an audio buffer for playback using a text input.

<InlineFilter filters={["react", "javascript", "nextjs", "react-native"]}>
```ts title="App.tsx"
import "./App.css";
import { generateClient } from "aws-amplify/api";
Expand Down Expand Up @@ -267,4 +268,53 @@ function App() {

export default App;
```
</InlineFilter>

<InlineFilter filters={["angular"]}>
```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<Schema>();

type PollyReturnType = Schema['convertTextToSpeech']['returnType'];

@Component({
selector: 'app-root',
template: `
<div class="flex flex-col">
<button (click)="synthesize()">Synth</button>
<button (click)="fetchAudio()">Fetch audio</button>
<a [href]="src">Get audio file</a>
</div>
`,
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();
}
}
```
</InlineFilter>

0 comments on commit 5144ff3

Please sign in to comment.