Skip to main content

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 device
await 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 cleanup
Speaker.stopAudio()

// Monitor volume changes using the audio analyser
// Volume is in dB range -100 to 0
Speaker.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 events
Speaker.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 AnalyserNode
console.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