Component

Vue Audio Visualizer Component

<DomAudioVisualizer>

A live waveform of input levels from a MediaStream. Shows real audio activity without recording, playing, or transmitting the stream.

Live example

Give any audio stream a visible signal

Microphone

Off

Microphone

Microphone is off

The same stream, another view

This standalone visualiser observes the existing stream. It does not request or own the microphone.

SharedStream.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { shallowRef } from 'vue';
import { DomAudioInput, DomAudioVisualizer } from '@getdom/studio';

const stream = shallowRef(null);
/** Shares the existing capture stream; the second meter never opens a microphone. */
function receiveStream(value) { stream.value = value; }
</script>

<template>
	<div class="w-full max-w-md space-y-5">
		<DomAudioInput @stream="receiveStream" />
		<div class="space-y-2 rounded-2xl border border-border p-5">
			<p class="text-sm font-medium text-canvas-fg">The same stream, another view</p>
			<DomAudioVisualizer :stream="stream" :bars="40" class="h-20 text-primary" />
			<p class="text-xs leading-relaxed text-muted-fg">This standalone visualiser observes the existing stream. It does not request or own the microphone.</p>
		</div>
	</div>
</template>

Measured input, quiet when quiet

The bars show recent RMS input levels from Web Audio, with a display curve that makes quiet audio easier to see. The level event emits the original amplitude from 0 to 1. No animation is fabricated when the microphone is silent, muted, or stopped. Reduced-motion preferences slow the visual update rate. This indicates audio activity, not speech detection or calibrated loudness.

Media input

Built to work together

Audio controls

Click to talk, waveform, mute, and input settings.

Audio input

A standalone microphone setup and sound check.

Audio visualizer

Show the live level of an existing audio stream.

Camera input

Choose a webcam and check a local preview.

Capture ownership. Audio input, Audio controls, and Camera input each own one capture session. Use one microphone capture component per session, then pass its stream to any extra visualisers. Stop, unmount, and page exit release owned tracks. Mute disables audio tracks but retains the microphone until Stop.

Device changes. Microphones switch only after the replacement opens successfully; failure keeps the previous stream. Cameras release the previous device first so phones can change cameras. Replace the input in your transport whenever @stream fires. Device removal or revoked access produces an error with an explicit retry.

Browser access. Open on HTTPS or localhost. Capture starts after a user action; device names may stay hidden until permission is granted. Embedded pages also need microphone/camera permission in the iframe and the parent’s Permissions Policy. Browser media permissions.

Programmatic control. Capture components expose start(): Promise<MediaStream | null>, stop(), stream, and state through a template ref. Call start() from a user gesture. Constraints apply on the next start or device switch. These components do not establish an AI or meeting connection.

Reference

Props

Control props

Name	Type	TS	Default	Description
`stream`	object	Record<string, unknown>	—	Application-owned MediaStream. The visualizer never stops its tracks.
`muted`	boolean	boolean	false	Show a flat baseline while the input is muted.
`bars`	number	number	25	Number of rounded bars, clamped to 8–64.
`label`	string	string	'Microphone input level'	Accessible name for the live input meter.

Auto-generated from Audio visualizer.props and inline _edit hints.

Events

Name	Payload	Description
@level	(level `level: number;` : number)	Measured RMS amplitude from 0 to 1, emitted at most ten times per second. This is input activity, not speech detection.
@error	({ name, message })	Web Audio could not analyse the stream. Capture remains owned by the caller.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.