storyfai-s2t-component v1.4.2
StoryfAI Component (Speech To Text)
This library/component is a microphone that enables voice-to-text functionality using StoryfAI services. It is straightforward to implement in any framework; all that is required is an API key generated through the StoryfAI web application.
Implementation
As mentioned above, we need an API key provided by the StoryfAI application.
JavaScript native
Here is a basic guide to install a StoryfAI component published in npm in an JavaScript project:
Step 1: Install StoryfAI folder It is essential to acquire the file that stores the integral configuration of the component, using the following command.
npm i storyfai-s2t-component
Step 2: Configure component in your project Upload the downloaded file to your project structure/folder
/
|-- storyfai-lib
|-- index.html
|-- ...
Step 3: Use the StoryfAI component
- Import the component scripts: In your
index.html
file, you need to import the main module of the component inside the<head>
section of the document.
<html lang="en">
<head>
...
<title>My Vanilla App</title>
<!-- Import this files to get the Storyfai component -->
<script type="module" src="node_modules/storyfai-s2t-component/dist/storyfai-s2t-component/storyfai-s2t-component.esm.js"></script>
<script nomodule src="node_modules/storyfai-s2t-component/dist/esm/storyfai-s2t-component.js"></script>
</head>
<body>
<!-- Page content -->
</body>
</html>
- Use the component in your vanilla page: Now, you can use the StoryfAI component in your page, adding the corresponding tag:
<!-- index.html -->
<h1>My Vanilla Project</h1>
<!-- Use the StoryfAI Component adding your API key -->
<storyfai-speech api-key="'your_api_key_here'"></storyfai-speech>
- Use the Outputs event: To get the output events, we need to add the corresponding tags with a function that receives the event.
<storyfai-speech api-key="'your_api_key_here'"></storyfai-speech>
<!-- Use the receiveText event listener to get the text received by the speech to text response -->
<script>
const storyfaiSpeech = document.querySelector('storyfai-speech');
storyfaiSpeech.addEventListener('receiveText', event => {
// your login here
});
</script>
Angular
Here is a basic guide to install a StoryfAI component published in npm in an Angular project:
Step 1: Create a new Angular project If you don't have an Angular project yet, you can create one with Angular CLI. Open your terminal and run the following command:
ng new project-name
cd project-name
Step 2: Install the StoryfAI component Use npm or yarn to install the StoryfAI component in your Angular project. For example, if the component is called my-component-stencil, run:
npm i storyfai-s2t-component
Step 3: Configure the component in your Angular project
- Import the component module: In your Angular module (usually app.module.ts), import the
CUSTOM_ELEMENTS_SCHEMA
schema used to enable the use of custom elements in an Angular application.
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@NgModule({
...,
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
- Register components by StoryfAI library: Import the
defineCustomElements
function, this is usually called at the entry point of the application, such as in the main file (main.ts or similar) of an Angular application.
// main.ts Angular file
import { defineCustomElements } from 'storyfai-s2t-component/loader';
// file configuration
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
defineCustomElements(window);
- Use the component in your template: Now, you can use the StoryfAI component in your Angular templates. Open the template file where you want to use the component and add the corresponding tag:
<!-- app.component.html -->
<h1>My Angular Project</h1>
<!-- Use the StoryfAI Component adding your API key -->
<storyfai-speech [apiKey]="'your_api_key_here'"></storyfai-speech>
- Use the Outputs event: To get the output events, we need to add the corresponding tags with a function that receives the event.
<!-- app.component.html -->
<h1>My Angular Project</h1>
<!-- Use the (receiveText) property to get the text received by the speech to text response -->
<storyfai-speech [apiKey]="'your_api_key_here'" (receiveText)="handleReceiveSpeech($event)"></storyfai-speech>
Storyfai-S2t-Component
It was generated with StencilJs
Inputs
apiKey - A StoryfAI LOB apiKey, the default value is
''
languageCode - A language of the speech, the value is automatically selected when receiving the language configuration
environment - A environment selected (optional), the default value is
'dev'
Properties
| Property | Attribute | Type | Default |
| -------------- | --------------- | ------------------------- | ------- |
| apiKey
| api-key
| string
| ''
|
| environment
| environment
| "dev" \| "prod" \| "qa"
| 'dev'
|
| languageCode
| language-code
| string
| ''
|
Outputs
- receiveText - Return the result by the speech to text
type String
- languagesAvailable - Return the language configuration
interface SpeechConfigurationResponse {
defaultLanguage: LanguageUse;
languages: LanguageUse[];
}
interface LanguageUse {
code: string;
name: string;
}
Events
Event | Type |
---|---|
languagesAvailable | CustomEvent<SpeechConfigurationResponse> |
receiveText | CustomEvent<string> |