---
title: "Call State | Micdrop"
description: "Monitor and react to real-time conversation state changes during voice calls."
url: "https://micdrop.dev/docs/client/call-state"
---

*   [Getting Started](/docs/getting-started)
*   [Client (Browser)](/docs/client)
    
    *   [Installation](/docs/client/installation)
    *   [React Hooks](/docs/client/react-hooks)
    *   [Start/Stop Call](/docs/client/start-stop-call)
    *   [Pause/Resume Call](/docs/client/pause-resume-call)
    *   [Mute/Unmute Call](/docs/client/mute-unmute-call)
    *   [Call State](/docs/client/call-state)
    *   [Display Conversation Messages](/docs/client/display-conversation-messages)
    *   [Handling Tool Calls](/docs/client/handling-tool-calls)
    *   [Device Management](/docs/client/devices-management)
    *   [Voice Activity Detection (VAD)](/docs/client/vad)
    *   [Error Handling](/docs/client/error-handling)
    *   Utility Classes
        
        *   [Mic](/docs/client/utility-classes/mic)
        *   [MicdropClient](/docs/client/utility-classes/micdrop-client)
        *   [MicRecorder](/docs/client/utility-classes/mic-recorder)
        *   [Speaker](/docs/client/utility-classes/speaker)
        
    
*   [Server (Node.js)](/docs/server)
    
    *   [Installation](/docs/server/installation)
    *   [With Fastify](/docs/server/with-fastify)
    *   [With NestJS](/docs/server/with-nestjs)
    *   [Auth and Parameters](/docs/server/auth-and-parameters)
    *   [First Message](/docs/server/first-message)
    *   [Save Messages](/docs/server/save-messages)
    *   [Resume a Conversation](/docs/server/resume-conversation)
    *   [Recording Audio](/docs/server/recording-audio)
    *   [Error Handling](/docs/server/error-handling)
    *   [Tools](/docs/server/tools)
    *   [Extract Value from Answer](/docs/server/extract)
    *   [Auto End Call](/docs/server/auto-end-call)
    *   [Semantic Turn Detection](/docs/server/semantic-turn-detection)
    *   [Noise Filtering](/docs/server/noise-filtering)
    *   [Micdrop Protocol](/docs/server/protocol)
    
*   [AI Integrations](/docs/ai-integration)
    
    *   Provided Integrations
        
        *   [AI SDK](/docs/ai-integration/provided-integrations/ai-sdk)
        *   [Cartesia](/docs/ai-integration/provided-integrations/cartesia)
        *   [ElevenLabs](/docs/ai-integration/provided-integrations/elevenlabs)
        *   [Gladia](/docs/ai-integration/provided-integrations/gladia)
        *   [Gradium](/docs/ai-integration/provided-integrations/gradium)
        *   [Mistral](/docs/ai-integration/provided-integrations/mistral)
        *   [OpenAI](/docs/ai-integration/provided-integrations/openai)
        
    *   Custom Integrations
        
        *   [Agent (LLM)](/docs/ai-integration/custom-integrations/custom-agent)
        *   [Speech-to-Text (STT)](/docs/ai-integration/custom-integrations/custom-stt)
        *   [Text-to-Speech (TTS)](/docs/ai-integration/custom-integrations/custom-tts)
        
    *   Fallback Strategies
        
        *   [FallbackAgent](/docs/ai-integration/fallback-strategies/agent-fallback)
        *   [FallbackSTT](/docs/ai-integration/fallback-strategies/stt-fallback)
        *   [FallbackTTS](/docs/ai-integration/fallback-strategies/tts-fallback)
        
    *   [IA Vocale Souveraine 🇫🇷🇪🇺](/docs/ai-integration/sovereign-voice-ai)
    

[Micdrop](/) › [Documentation](/docs/getting-started)

# Call State

Monitor and react to real-time conversation state changes during voice calls.

## `StateChange` Event

The `StateChange` event is emitted whenever the client state changes. It provides both the current state and the previous state for comparison:

```
Micdrop.on(  'StateChange',  (currentState: MicdropState, previousState: MicdropState) => {    // Handle state change  })
```

See [MicdropClient](/docs/client/utility-classes/micdrop-client#state) for more details.

## State Properties

The `MicdropState` object contains these properties:

Property

Type

Description

`isStarting`

`boolean`

Call is connecting and starting

`isStarted`

`boolean`

Call is active and ready

`isReconnecting`

`boolean`

Call is attempting to reconnect

`isPaused`

`boolean`

Call is paused (no audio processing)

`isListening`

`boolean`

Ready to detect user speech

`isProcessing`

`boolean`

Processing user input on server

`isUserSpeaking`

`boolean`

User voice detected

`isAssistantSpeaking`

`boolean`

Assistant audio playing

`isMicStarted`

`boolean`

Microphone is active

`isMicMuted`

`boolean`

Microphone is muted

`micDeviceId`

`string`

Active microphone device ID

`speakerDeviceId`

`string`

Active speaker device ID

`micDevices`

`MediaDeviceInfo[]`

Available microphones

`speakerDevices`

`MediaDeviceInfo[]`

Available speakers

`conversation`

`MicdropConversation`

Message history

`error`

`MicdropClientError`

Current error if any

## State Diagram

stateDiagram-v2
    \[\*\] --> isStarting: Start call
    isStarting --> isStarted: Start mic and connection
    isStarted --> \[\*\]: Stop call

    state isStarted {
        \[\*\] --> isProcessing
        isListening --> isUserSpeaking : User speaks
        isUserSpeaking --> isProcessing : User stops speaking
        isProcessing --> isAssistantSpeaking : Generate and play answer
        isProcessing --> isUserSpeaking : User interrupts
        isProcessing --> isListening : No answer generated
        isAssistantSpeaking --> isListening : Assistant finished
        isAssistantSpeaking --> isUserSpeaking : User interrupts
    }

    isStarted --> isPaused : Pause call
    isPaused --> isStarted : Resume call

**Notes:**

*   User can interrupt the assistant at any time by speaking during the `isProcessing` or `isAssistantSpeaking` states. This allows for natural conversation flow. To prevent interruptions during assistant responses, use the [`disableInterruption` setting](/docs/client/utility-classes/micdrop-client#options).
*   When `isPaused` is true, `isStarted` stays true.
*   When `isReconnecting` is true, `isStarted` stays true.
*   `isMicStarted` becomes true when we start the mic (with `Micdrop.startMic`) or start the call (with `Micdrop.start`).

## Starting a Call

```
Micdrop.on('StateChange', (state, prevState) => {  if (state.isStarting && !prevState.isStarting) {    console.log('🔄 Connecting...')  }
  if (state.isStarted && !prevState.isStarted) {    console.log('✅ Connected and ready!')  }
  if (state.isReconnecting && !prevState.isReconnecting) {    console.log('🔄 Connection lost, reconnecting...')  }})
```

## Conversation Flow

The typical conversation flow follows this pattern:

```
Micdrop.on('StateChange', (state, prevState) => {  // 1. Listening for user input  if (state.isListening && !prevState.isListening) {    console.log('🎤 Listening...')    // Show listening indicator  }
  // 2. User starts speaking  if (state.isUserSpeaking && !prevState.isUserSpeaking) {    console.log('🗣️ User speaking...')    // Show speaking indicator  }
  // 3. Processing user input  if (state.isProcessing && !prevState.isProcessing) {    console.log('⚡ Processing...')    // Show processing indicator  }
  // 4. Assistant responds  if (state.isAssistantSpeaking && !prevState.isAssistantSpeaking) {    console.log('🤖 Assistant speaking...')    // Show assistant speaking indicator  }})
```

## With React

For React applications, use the `useMicdropState` hook to automatically subscribe to state changes.

First, install the React package:

Terminal window

```
npm install @micdrop/react
```

Then use the hook:

```
import { useMicdropState } from '@micdrop/react'
function CallInterface() {  const {    isStarting,    isStarted,    isReconnecting,    isListening,    isUserSpeaking,    isProcessing,    isAssistantSpeaking,    isPaused,  } = useMicdropState()
  return (    <div className="call-interface">      {isStarting && <div className="status starting">Starting...</div>}      {isStarted && <div className="status started">Started</div>}      {isReconnecting && (        <div className="status reconnecting">🔄 Reconnecting...</div>      )}      {isPaused && <div className="status paused">⏸️ Call paused</div>}      {isMuted && <div className="status muted">⏸️ Call muted</div>}      {isListening && <div className="status listening">🎤 Listening</div>}      {isUserSpeaking && (        <div className="status user-speaking">🗣️ You're speaking</div>      )}      {isProcessing && <div className="status processing">⚡ Processing</div>}      {isAssistantSpeaking && (        <div className="status assistant-speaking">🤖 Assistant speaking</div>      )}    </div>  )}
```

More information about hooks in the [React hooks](/docs/client/react-hooks) section.

[Previous← Mute/Unmute Call](/docs/client/mute-unmute-call)[NextDisplay Conversation Messages →](/docs/client/display-conversation-messages)

On this page

*   [StateChange Event](#statechange-event)
*   [State Properties](#state-properties)
*   [State Diagram](#state-diagram)
*   [Starting a Call](#starting-a-call)
*   [Conversation Flow](#conversation-flow)
*   [With React](#with-react)