---
title: "Device Management | Micdrop"
description: "Select and manage microphone and speaker devices for optimal audio quality and user preference."
url: "https://micdrop.dev/docs/client/devices-management"
---

*   [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)

# Device Management

Select and manage microphone and speaker devices for optimal audio quality and user preference.

## Quick Start

Access available devices and change them using MicdropClient methods:

```
import { Micdrop } from '@micdrop/client'
// Get available devicesconsole.log('Microphones:', Micdrop.micDevices)console.log('Speakers:', Micdrop.speakerDevices)
// Change devicesawait Micdrop.changeMicDevice('mic-device-id')await Micdrop.changeSpeakerDevice('speaker-device-id')
```

## Device Listing

### Get Available Microphones

```
// Access microphone devicesconst micDevices = Micdrop.micDevices
micDevices.forEach((device) => {  console.log('Mic:', device.label || 'Unknown Device')  console.log('ID:', device.deviceId)  console.log('Group:', device.groupId)})
// Current microphone deviceconsole.log('Current mic:', Micdrop.micDeviceId)
```

### Get Available Speakers

```
// Access speaker devicesconst speakerDevices = Micdrop.speakerDevices
speakerDevices.forEach((device) => {  console.log('Speaker:', device.label || 'Unknown Device')  console.log('ID:', device.deviceId)  console.log('Group:', device.groupId)})
// Current speaker deviceconsole.log('Current speaker:', Micdrop.speakerDeviceId)
```

## Device Selection

### Change Microphone

Switch to a different microphone device:

```
// Change microphone by device IDconst newMicId = Micdrop.micDevices[1].deviceIdawait Micdrop.changeMicDevice(newMicId)
```

### Change Speaker

Switch to a different speaker/headphone device:

```
// Change speaker by device IDconst newSpeakerId = Micdrop.speakerDevices[1].deviceIdawait Micdrop.changeSpeakerDevice(newSpeakerId)
```

### Device Persistence

Selected devices are automatically persisted in localStorage.

## React Device Component

```
import { useState } from 'react'import { Micdrop } from '@micdrop/client'import { useMicdropState } from '@micdrop/react'
function DeviceSettings() {  const state = useMicdropState()  const [changing, setChanging] = useState(false)
  const changeMic = async (deviceId: string) => {    setChanging(true)    try {      await Micdrop.changeMicDevice(deviceId)    } finally {      setChanging(false)    }  }
  const changeSpeaker = async (deviceId: string) => {    setChanging(true)    try {      await Micdrop.changeSpeakerDevice(deviceId)    } finally {      setChanging(false)    }  }
  return (    <div className="device-settings">      <div className="device-group">        <label>Microphone:</label>        <select          value={state.micDeviceId || ''}          onChange={(e) => changeMic(e.target.value)}          disabled={changing}        >          {state.micDevices.map((device) => (            <option key={device.deviceId} value={device.deviceId}>              {device.label || 'Unknown Microphone'}            </option>          ))}        </select>      </div>
      <div className="device-group">        <label>Speaker:</label>        <select          value={state.speakerDeviceId || ''}          onChange={(e) => changeSpeaker(e.target.value)}          disabled={changing}        >          {state.speakerDevices.map((device) => (            <option key={device.deviceId} value={device.deviceId}>              {device.label || 'Unknown Speaker'}            </option>          ))}        </select>      </div>    </div>  )}
```

## Device Testing

### Test Microphone

Monitor microphone input levels to verify the selected device is working correctly.

#### Using Mic Analyzer (Vanilla JavaScript)

```
import { Mic } from '@micdrop/client'
// Listen to microphone volume changesconst onMicVolumeChange = (volume: number) => {  console.log('Microphone volume:', volume, 'dB')  // Update your UI with the volume level  updateMicVolumeIndicator(volume)}
// Start listening to volume eventsMic.analyser.on('volume', onMicVolumeChange)
// Stop listening (cleanup)Mic.analyser.off('volume', onMicVolumeChange)
```

#### Using React Hook

```
import { useMicVolume } from '@micdrop/react'
function MicVolumeIndicator() {  const { micVolume } = useMicVolume()  const volume = Math.max(0, micVolume + 100) // Convert dB to percentage
  return (    <div className="mic-volume-container">      <label>Microphone Level:</label>      <div        className="volume-bar"        style={{          background: `linear-gradient(            to right,            #00bb00,            #00bb00 ${volume}%,            #ccc ${volume}%,            #ccc 100%          )`,          width: '100%',          height: '16px',          borderRadius: '8px',          transition: 'all 0.1s',        }}      />      <span>{micVolume.toFixed(1)} dB</span>    </div>  )}
```

This provides real-time visual feedback of microphone input levels, helping users verify their microphone is working and adjust VAD thresholds appropriately.

**Example:** [MicVolume component](https://github.com/Godefroy/micdrop/blob/main/examples/demo-client/src/components/MicVolume.tsx)

**Learn more:** [Mic utility class](/docs/client/utility-classes/mic)

### Test Speaker

Monitor speaker output levels and test audio playback to verify the selected device is working correctly.

#### Using Speaker Analyzer (Vanilla JavaScript)

```
import { Speaker } from '@micdrop/client'
// Listen to speaker volume changesconst onSpeakerVolumeChange = (volume: number) => {  console.log('Speaker volume:', volume, 'dB')  // Update your UI with the volume level  updateSpeakerVolumeIndicator(volume)}
// Start listening to volume eventsSpeaker.analyser.on('volume', onSpeakerVolumeChange)
// Stop listening (cleanup)Speaker.analyser.off('volume', onSpeakerVolumeChange)
```

#### Using React Hook

```
import { useSpeakerVolume } from '@micdrop/react'
function SpeakerVolumeIndicator() {  const { speakerVolume } = useSpeakerVolume()  const volume = Math.max(0, speakerVolume + 100) // Convert dB to percentage
  return (    <div className="speaker-volume-container">      <label>Speaker Level:</label>      <div        className="volume-bar"        style={{          background: `linear-gradient(            to right,            #0066cc,            #0066cc ${volume}%,            #ccc ${volume}%,            #ccc 100%          )`,          width: '100%',          height: '16px',          borderRadius: '8px',          transition: 'all 0.1s',        }}      />      <span>{speakerVolume.toFixed(1)} dB</span>    </div>  )}
```

**Example:** [SpeakerTestButton component](https://github.com/Godefroy/micdrop/blob/main/examples/demo-client/src/components/SpeakerTestButton.tsx)

**Learn more:** [Speaker utility class](/docs/client/utility-classes/speaker)

[Previous← Handling Tool Calls](/docs/client/handling-tool-calls)[NextVoice Activity Detection (VAD) →](/docs/client/vad)

On this page

*   [Quick Start](#quick-start)
*   [Device Listing](#device-listing)
*   [Get Available Microphones](#get-available-microphones)
*   [Get Available Speakers](#get-available-speakers)
*   [Device Selection](#device-selection)
*   [Change Microphone](#change-microphone)
*   [Change Speaker](#change-speaker)
*   [Device Persistence](#device-persistence)
*   [React Device Component](#react-device-component)
*   [Device Testing](#device-testing)
*   [Test Microphone](#test-microphone)
*   [Test Speaker](#test-speaker)