@composy/audio-vue

@composy/audio-vue

Vue 3 adapter for @composy/audio-core.

Install

pnpm add @composy/audio-core @composy/audio-vue vue

Usage

<script setup lang="ts">
import { Audio } from '@composy/audio-vue'
</script>

<template>
  <Audio
    title="Meeting Recorder"
    :recorder="{ quality: 'speech', maxDuration: 120 }"
    :visualizer="{ type: 'timeline' }"
    @record-stop="result => console.log(result.filename)"
  />
</template>

Component

Audio forwards the core manager options except container, and exposes:

• start(), pause(), resume(), stop(), clear(), download()
• setVisualizerType(type)
• setMuted(muted), toggleMuted()
• listInputDevices(), setInputDevice(deviceId)
• getRecordResult()

Events

• ready
• permission-granted
• permission-denied
• state-change
• record-start
• record-data
• record-pause
• record-resume
• record-stop
• record-clear
• max-duration-reached
• input-devices-change
• mute-change
• metrics
• destroy
• error

Styling

The host class is ldesign-audio-vue-host. The rendered core UI uses ldesign-audio* classes.

Default styling consumes packages/color variables like --ld-primary-500, --ld-bg-surface, and --ld-text-primary, and packages/size variables like --ld-spacing-md, --ld-radius-lg, and --ld-px-220.

Build

pnpm type-check
pnpm type-check:cjs
pnpm build
pnpm lint:check

Read APIs and initialization errors

useAudio() and the <Audio> expose API include getAudioBlob(), getAudioUrl(), and getWaveformSamples(). The sample method returns a defensive copy. If Core construction fails, init() returns null and writes the normalized exception to error.value instead of throwing through the component tree.