---
title: "Speaker | Micdrop"
description: "The Speaker module provides functionality for managing audio output devices and playing audio in the browser."
url: "https://micdrop.dev/docs/client/utility-classes/speaker"
---

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

# Speaker

The Speaker module provides functionality for managing audio output devices and playing audio in the browser.

## Features

*   🔊 Audio output device management
*   🎵 Streaming audio playback
*   📊 Real-time audio analysis
*   💾 Persistent device selection
*   🔄 Dynamic device switching
*   ⏯️ Playing state events

## Usage Example

```
import { Speaker } from '@micdrop/client'
// Change to a specific output deviceawait Speaker.changeDevice('device-id')
// Play an audio blob (pcm_s16le)const audioResponse = await fetch('audio.wav')if (audioResponse.ok) {  const audioBlob = await audioResponse.blob()  await Speaker.playAudio(audioBlob)}
// Stop playback and cleanupSpeaker.stopAudio()
// Monitor volume changes using the audio analyser// Volume is in dB range -100 to 0Speaker.analyser.on('volume', (volume: number) => {  // Convert to 0-100 range for visualization if needed  const normalizedVolume = Math.max(0, volume + 100)  console.log('Current volume:', normalizedVolume)})
// Listen for playing eventsSpeaker.on('StartPlaying', () => {  console.log('Speaker started playing')})Speaker.on('StopPlaying', () => {  console.log('Speaker stopped playing')})
```

## API Reference

### Properties

#### `isPlaying: boolean`

Indicates whether audio is currently being played through the speaker.

```
if (Speaker.isPlaying) {  console.log('Speaker is currently playing audio')}
```

#### `analyser: AudioAnalyser`

An instance of `AudioAnalyser` that can be used to analyze the audio output.

```
Speaker.analyser.on('volume', (volume: number) => {  console.log('Current volume:', volume)})
// Access the underlying AnalyserNodeconsole.log(Speaker.analyser.node)
```

### Functions

#### `changeDevice(deviceId: string): Promise<void>`

Changes the current audio output device.

```
await Speaker.changeDevice(deviceId)
```

#### `playAudio(blob: Blob): Promise<void>`

Plays an audio blob.

```
await Speaker.playAudio(audioBlob)
```

*   Audio must be in `pcm_s16le` format.
*   An audio can be split into chunks and provided sequentially to `playAudio` as long as the first chunk has headers.

#### `stopAudio(): void`

Stops audio playback and cleans up resources.

```
Speaker.stopAudio()
```

### Events

The Speaker emits events for playing state changes. You can listen to these events using `.on()`:

#### `StartPlaying`

Emitted when audio playback starts.

#### `StopPlaying`

Emitted when audio playback stops.

```
Speaker.on('StartPlaying', () => {  console.log('Speaker started playing audio')})Speaker.on('StopPlaying', () => {  console.log('Speaker stopped playing audio')})
```

## Browser Support

Fully supported in Chrome, Firefox, Safari and Edge.

Requires support for:

*   Web Audio API
*   `HTMLMediaElement.setSinkId()` or `AudioContext.setSinkId()` for device selection

[Previous← MicRecorder](/docs/client/utility-classes/mic-recorder)[NextServer (Node.js) →](/docs/server)

On this page

*   [Features](#features)
*   [Usage Example](#usage-example)
*   [API Reference](#api-reference)
*   [Properties](#properties)
*   [Functions](#functions)
*   [Events](#events)
*   [Browser Support](#browser-support)