---
description: Practical guide to the Capacitor Speech Recognition API: integrate on-device voice transcription into Ionic and Capacitor apps.
title: Exploring the Capacitor Speech Recognition API - Capawesome
image: https://capawesome.io/docs/assets/images/social/blog/exploring-the-capacitor-speech-recognition-api.png
---

[ Skip to content](#exploring-the-capacitor-speech-recognition-api) 

[ 🎉 Introducing **Capawesome Platform** — one platform for Live Updates, Native Builds, App Store Publishing, and Insider SDKs.](https://capawesome.io) 

* [  Formbricks ](/docs/plugins/formbricks/)
* [  Geocoder ](/docs/plugins/geocoder/)
* [  Google Sign-In ](/docs/plugins/google-sign-in/)
* [  libSQL ](/docs/plugins/libsql/)
* [  Live Update ](/docs/plugins/live-update/)
* [  Managed Configurations ](/docs/plugins/managed-configurations/)
* [  Media Session ](/docs/plugins/media-session/)
* [  ML Kit ](/docs/plugins/mlkit/)
* [  NFC ](/docs/plugins/nfc/)
* [  OAuth ](/docs/plugins/oauth/)
* [  Pedometer ](/docs/plugins/pedometer/)
* [  Photo Editor ](/docs/plugins/photo-editor/)
* [  PostHog ](/docs/plugins/posthog/)
* [  Printer ](/docs/plugins/printer/)
* [  Purchases ](/docs/plugins/purchases/)
* [  RealtimeKit ](/docs/plugins/realtimekit/)
* [  Screen Orientation ](/docs/plugins/screen-orientation/)
* [  Screenshot ](/docs/plugins/screenshot/)
* [  Secure Preferences ](/docs/plugins/secure-preferences/)
* [  Speech Recognition ](/docs/plugins/speech-recognition/)
* [  Speech Synthesis ](/docs/plugins/speech-synthesis/)
* [  Share Target ](/docs/plugins/share-target/)
* [  Square Mobile Payments ](/docs/plugins/square-mobile-payments/)
* [  SQLite ](/docs/plugins/sqlite/)
* [  Superwall ](/docs/plugins/superwall/)
* [  Torch ](/docs/plugins/torch/)
* [  Wifi ](/docs/plugins/wifi/)
* [  Zip ](/docs/plugins/zip/)
* [  Cloud ](/docs/cloud/)
* [  Live Updates ](/docs/cloud/live-updates/)
* Advanced
* Integrations
* [  Native Builds ](/docs/cloud/native-builds/)
* [  Configuration ](/docs/cloud/native-builds/configuration/)
* [  Environments ](/docs/cloud/native-builds/environments/)
* Guides
* [  Sample Projects ](/docs/cloud/native-builds/sample-projects/)
* [  Troubleshooting ](/docs/cloud/native-builds/troubleshooting/)
* [  Automations ](/docs/cloud/automations/)
* [  Assist ](/docs/cloud/assist/)
* Account
* Organizations
* [  Organization and User Management ](/docs/cloud/organizations/memberships/)
* [  Single Sign-On (SSO) ](/docs/cloud/organizations/sso/)
* [  Teams ](/docs/cloud/organizations/teams/)
* [  Two-Factor Authentication ](/docs/cloud/organizations/two-factor-authentication/)
* [  Integrations ](/docs/cloud/integrations/)
* [  License Keys ](/docs/cloud/license-keys/)
* [  Webhooks ](/docs/cloud/webhooks/)
* [  Pricing ](https://capawesome.io/pricing/)
* [  FAQ ](/docs/cloud/faq/)
* [  Support ](/docs/cloud/support/)
* [  Contributing ](/docs/contributing/)
* [  LLMs ](/docs/llms/)
* [  Insiders ](/docs/insiders/)
* [  License ](https://capawesome.io/legal/eula/)
* [  Support ](/docs/insiders/support/)
* [  FAQ ](/docs/insiders/faq/)
* [  Blog ](/blog/)
* Categories

* [  Best Practices ](#best-practices)
* [  Conclusion ](#conclusion)

* Related links

# Exploring the Capacitor Speech Recognition API[¶](#exploring-the-capacitor-speech-recognition-api "Permanent link")

Voice interaction has become a cornerstone of modern mobile applications, transforming how users engage with their devices through natural speech commands and dictation. With the [Capacitor Speech Recognition](/docs/plugins/speech-recognition/) plugin from Capawesome, developers can seamlessly integrate powerful voice recognition capabilities into their Ionic and Capacitor applications, enabling real-time speech-to-text conversion across Android, iOS, and Web platforms through a unified API that handles the complexities of platform-specific speech recognition implementations.

## Installation[¶](#installation "Permanent link")

To install the Capacitor Speech Recognition plugin, please refer to the [Installation](/docs/plugins/speech-recognition/#installation) section in the plugin documentation.

## Usage[¶](#usage "Permanent link")

Let's explore the key features of the Capacitor Speech Recognition API and how to implement them effectively in your Ionic applications.

### Permission Handling[¶](#permission-handling "Permanent link")

Before implementing speech recognition functionality, it's crucial to ensure your application has the necessary permissions to access the microphone and speech recognition services. The Capacitor Speech Recognition API provides the [checkPermissions(...)](/docs/plugins/speech-recognition/#checkpermissions) and [requestPermissions(...)](/docs/plugins/speech-recognition/#requestpermissions) methods for this purpose:

`[](#%5F%5Fcodelineno-0-1)import { SpeechRecognition } from '@capawesome-team/capacitor-speech-recognition';
[](#%5F%5Fcodelineno-0-2)
[](#%5F%5Fcodelineno-0-3)const checkPermissions = async () => {
[](#%5F%5Fcodelineno-0-4)  const permissions = await SpeechRecognition.checkPermissions();
[](#%5F%5Fcodelineno-0-5)
[](#%5F%5Fcodelineno-0-6)  if (permissions.speechRecognition !== 'granted' || permissions.microphone !== 'granted') {
[](#%5F%5Fcodelineno-0-7)    console.log('Permissions not granted, requesting...');
[](#%5F%5Fcodelineno-0-8)    await requestPermissions();
[](#%5F%5Fcodelineno-0-9)  }
[](#%5F%5Fcodelineno-0-10)};
[](#%5F%5Fcodelineno-0-11)
[](#%5F%5Fcodelineno-0-12)const requestPermissions = async () => {
[](#%5F%5Fcodelineno-0-13)  const permissions = await SpeechRecognition.requestPermissions();
[](#%5F%5Fcodelineno-0-14)
[](#%5F%5Fcodelineno-0-15)  if (permissions.speechRecognition !== 'granted') {
[](#%5F%5Fcodelineno-0-16)    alert('Speech recognition permission is required to use this feature.');
[](#%5F%5Fcodelineno-0-17)  }
[](#%5F%5Fcodelineno-0-18)
[](#%5F%5Fcodelineno-0-19)  if (permissions.microphone !== 'granted') {
[](#%5F%5Fcodelineno-0-20)    alert('Microphone permission is required to capture audio.');
[](#%5F%5Fcodelineno-0-21)  }
[](#%5F%5Fcodelineno-0-22)};
`

Always verify permissions before starting speech recognition to ensure a smooth user experience and prevent permission-related errors.

### Start Listening[¶](#start-listening "Permanent link")

To begin capturing and recognizing speech, use the [startListening(...)](/docs/plugins/speech-recognition/#startlistening) method. This method allows you to configure various options for the recognition session:

`[](#%5F%5Fcodelineno-1-1)const startListening = async () => {
[](#%5F%5Fcodelineno-1-2)  try {
[](#%5F%5Fcodelineno-1-3)    // Add all necessary event listeners
[](#%5F%5Fcodelineno-1-4)    SpeechRecognition.addListener('start', () => {
[](#%5F%5Fcodelineno-1-5)      console.log('Speech recognition started');
[](#%5F%5Fcodelineno-1-6)    });
[](#%5F%5Fcodelineno-1-7)    SpeechRecognition.addListener('speechStart', () => {
[](#%5F%5Fcodelineno-1-8)      console.log('User started speaking');
[](#%5F%5Fcodelineno-1-9)    });
[](#%5F%5Fcodelineno-1-10)    SpeechRecognition.addListener('speechEnd', () => {
[](#%5F%5Fcodelineno-1-11)      console.log('User stopped speaking');
[](#%5F%5Fcodelineno-1-12)    });
[](#%5F%5Fcodelineno-1-13)    SpeechRecognition.addListener('partialResult', (event) => {
[](#%5F%5Fcodelineno-1-14)      console.log('Partial result:', event.partialResult);
[](#%5F%5Fcodelineno-1-15)    });
[](#%5F%5Fcodelineno-1-16)    SpeechRecognition.addListener('result', (event) => {
[](#%5F%5Fcodelineno-1-17)      console.log('Final result:', event.result);
[](#%5F%5Fcodelineno-1-18)    });
[](#%5F%5Fcodelineno-1-19)    SpeechRecognition.addListener('end', () => {
[](#%5F%5Fcodelineno-1-20)      console.log('Speech recognition ended');
[](#%5F%5Fcodelineno-1-21)    });
[](#%5F%5Fcodelineno-1-22)    SpeechRecognition.addListener('error', (event) => {
[](#%5F%5Fcodelineno-1-23)      console.error('Speech recognition error:', event.message);
[](#%5F%5Fcodelineno-1-24)    });
[](#%5F%5Fcodelineno-1-25)
[](#%5F%5Fcodelineno-1-26)    // Start listening for speech input
[](#%5F%5Fcodelineno-1-27)    await SpeechRecognition.startListening({
[](#%5F%5Fcodelineno-1-28)      language: 'en-US',
[](#%5F%5Fcodelineno-1-29)      silenceThreshold: 2000,
[](#%5F%5Fcodelineno-1-30)      partialResultsEnabled: true,
[](#%5F%5Fcodelineno-1-31)      contextualStrings: ['Capacitor', 'Ionic', 'Angular']
[](#%5F%5Fcodelineno-1-32)    });
[](#%5F%5Fcodelineno-1-33)
[](#%5F%5Fcodelineno-1-34)    console.log('Speech recognition started successfully');
[](#%5F%5Fcodelineno-1-35)  } catch (error) {
[](#%5F%5Fcodelineno-1-36)    console.error('Failed to start speech recognition:', error);
[](#%5F%5Fcodelineno-1-37)  }
[](#%5F%5Fcodelineno-1-38)};
`

The `startListening(...)` method accepts several configuration options including language selection, silence detection thresholds, and contextual strings that help improve recognition accuracy for domain-specific vocabulary. Make sure to adjust these parameters based on your application's requirements. Also, ensure that you add all necessary event listeners before calling `startListening(...)` to handle various speech recognition events effectively. The following events are available:

* **`start`**: Triggered when speech recognition begins - use this to update your UI to show that the system is ready to listen.
* **`end`**: Triggered when the recognition session concludes - essential for returning your UI to an idle state.
* **`speechStart`**: Fired when the user begins speaking - ideal for providing visual feedback that speech is being detected.
* **`speechEnd`**: Called when the user stops speaking - useful for indicating that the system is processing the captured audio.
* **`partialResult`**: Provides interim transcription results while the user is speaking - enables real-time text display for better user experience.
* **`result`**: Delivers the final transcribed text when recognition completes - this is where you'll process the user's speech input.
* **`error`**: Fired when recognition errors occur - critical for handling network issues, permission problems, or recognition failures gracefully.

### Stop Listening[¶](#stop-listening "Permanent link")

To manually end the speech recognition session, use the [stopListening(...)](/docs/plugins/speech-recognition/#stoplistening) method:

`[](#%5F%5Fcodelineno-2-1)const stopListening = async () => {
[](#%5F%5Fcodelineno-2-2)  try {
[](#%5F%5Fcodelineno-2-3)    await SpeechRecognition.stopListening();
[](#%5F%5Fcodelineno-2-4)    console.log('Speech recognition stopped');
[](#%5F%5Fcodelineno-2-5)  } catch (error) {
[](#%5F%5Fcodelineno-2-6)    console.error('Failed to stop speech recognition:', error);
[](#%5F%5Fcodelineno-2-7)  }
[](#%5F%5Fcodelineno-2-8)};
`

The `stopListening(...)` method only needs to be called if you want to manually stop the recognition session. Otherwise, the speech recognition will automatically stop based on the configured timeout or when silence is detected for the specified duration.

## Best Practices[¶](#best-practices "Permanent link")

When implementing speech recognition with the Capacitor Speech Recognition API, consider these best practices:

1. **Implement comprehensive error handling**: Always handle the `error` event to manage network issues, audio capture problems, and recognition failures gracefully. Provide clear feedback to users about what went wrong and how they can resolve the issue, ensuring your application remains stable even when speech recognition encounters problems.
2. **Optimize silence detection**: Configure the `silenceThreshold` parameter based on your application's use case. For conversational interfaces, use shorter thresholds (1-2 seconds) to maintain responsiveness, while dictation applications may benefit from longer thresholds (5-10 seconds) to accommodate natural pauses in speech.
3. **Provide visual feedback**: Use the various event listeners (`start`, `speechStart`, `speechEnd`, `end`) to update your UI and provide clear visual indicators of the recognition state. Show users when the system is listening, processing, or idle to create an intuitive voice interface that builds user confidence and understanding.

## Conclusion[¶](#conclusion "Permanent link")

The Capacitor Speech Recognition Plugin from Capawesome provides a comprehensive solution for integrating voice recognition capabilities into Ionic applications. By offering a unified API across multiple platforms, it enables developers to create sophisticated voice-enabled applications without the complexity of platform-specific speech recognition implementations.

To stay updated with the latest updates, features, and news about the Capawesome, Capacitor, and Ionic ecosystem, subscribe to the [Capawesome newsletter](/newsletter/) and follow us on [X (formerly Twitter)](https://x.com/capawesomeio).

If you have any questions or need assistance with the Capacitor Speech Recognition Plugin, feel free to reach out to the Capawesome team. We're here to help you implement powerful voice recognition features in your Ionic applications.

May 7, 2026 

 Back to top