Skip to main content

Overview of Attendi Speech Service Components

Welcome to the Attendi Speech Service Components documentation. This page provides an introduction to the key concepts and technologies that are shared across our platform's three client SDKs: web, iOS, and Android. Whether you are developing a web application, an iOS app, or an Android app, the core functionality of our components remains the same. Here, you will gain an understanding of how our components work, including the plugin system, extensibility options, and how to start using them in your projects.

For any audio recording and transcription needs, the central component is the Attendi Microphone. This component handles recording audio in the correct format and communicating with our backend APIs, and implements UI/UX best practices for recording audio. The appearance of the Attendi Microphone is highly customizable. Styles such as colors, fonts, size and shape can be changed, so that the component integrates seamlessly with the rest of your application.

Core concepts​

AttendiMicrophone Component​

At the heart of the Attendi Speech Service across all platforms is the AttendiMicrophone component. This component provides an intuitive and customizable interface for recording audio, which can then be processed and transcribed. It is designed with flexibility in mind, ensuring it can be integrated easily into a variety of user interfaces.

  • Web: The AttendiMicrophone is available as a webcomponent with the custom HTML tag <attendi-microphone>, enabling easy integration into any web application, no matter if using modern frameworks such as React, Vue, Angular, or vanilla HTML/JavaScript.
  • iOS: In iOS, the AttendiMicrophone is a SwiftUI component, offering native integration with iOS apps.
  • Android: On Android, the AttendiMicrophone is a Jetpack Compose component.

Plugin System​

One of the key features of the AttendiMicrophone is its plugin-based extensibility. The plugin system allows you to extend and customize the behavior of the microphone components by adding specific functionality, such as handling errors, visualizing volume levels, or transcribing audio. Plugins can add functionality at specific points in the lifecycle of the microphone (e.g., before recording starts, when recording stops, or when an error occurs).

Available Plugins:​

We ship a set of plugins out of the box that cover common use cases:

  • Error handling: Automatically handle and display errors that occur during recording or transcription.
  • Audio transcription: Leverage the Attendi Speech Service to transcribe recorded audio.
  • Volume feedback: Visualize the current audio input level during recording, giving users feedback on whether their microphone is active.

You can add plugins dynamically based on your use case, giving you full control over how the microphone component behaves in your application.

Shared functionalities across platforms​

Despite platform differences, the core functionality of the AttendiMicrophone remains consistent across Web, iOS and Android. These shared features include:

  • Recording Control: Start, stop and and manage audio recording with simple APIs or user interaction (e.g., button press).
  • Customizable Appearance: Adjust colors, size and visual states to match your application's design.
  • Event-Driven Architecture: The components emit events such as volume changes, UI state updates and transcription results, which you can listen to and act upon in your application.

Extending functionality: hooks and callbacks​

Each platform provides hooks and callbacks that allow developers to customize behavior at key stages in the component lifecycle:

  • Web: The microphone provides a series of lifecycle hooks (e.g., onStartRecording, onStopRecording) to allow for custom behavior.
  • iOS: Developers can pass closures to handle specific events (e.g., onResult, onEvent), allowing custom handling of transcription results or UI changes.
  • Android: The Jetpack Compose component exposes callbacks like onEvent and onResult, enabling developers to react to events and process results as needed.

Installation & Setup​

Getting started with Attendi Speech Service components is straightforward. Each SDK can be installed using platform-specific package managers:

  • Web: Available via npm or as pre-bundled script.
  • iOS: Installable via Swift Package Manager or manually by integrating the GitHub repository.
  • Android: Distributed as a Kotlin package and integrated via Gradle or Maven.

Moving Forward​

The following sections contain instructions and usage for each platform.