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.
As mentioned above, we need an API key provided by the StoryfAI application.
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>
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>
It was generated with StencilJs
-
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 |
'' |
- 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> |