JamIT
Discuss a project
Open Source Package

jamit-audio-recorder

A modern and framework-friendly audio recording library for Vue, Nuxt, React and Vanilla TypeScript.

The library provides a framework-independent recording core, fully typed integrations for popular frontend frameworks and ready-to-use recorder components that can be adapted to individual application designs.

View on GitHub Explore the demo
Overview

Audio recording without framework lock-in

jamit-audio-recorder is a modular audio recording solution for modern web applications. The framework-independent core contains the complete recording logic, while dedicated packages provide convenient integrations for Vue, Nuxt and React.

Developers can use the headless API to build a completely custom interface or use ready-to-use Vue and React recorder components with sensible defaults, responsive styling and extensive customization options.

Capabilities

Core features

A modular recording foundation with typed APIs, framework integrations, ready-to-use components and reliable browser resource management.

Complete recording lifecycle

Start, pause, resume, stop, cancel and reset audio recordings through a consistent and fully typed API.

Framework-independent core

The central recording logic is independent of Vue, React and Nuxt and can also be used directly with Vanilla TypeScript.

Typed framework integrations

Dedicated composables and hooks provide reactive state management, typed recorder actions and automatic lifecycle cleanup for Vue, Nuxt and React.

Ready-to-use components

Use professional recorder components for Vue and React or customize individual areas through props, Vue slots, React render props and CSS variables.

Recording limits

Configure maximum recording duration and maximum file size. Limit violations are exposed through typed error states.

Browser-aware audio formats

The library checks the formats supported by the current browser, selects an appropriate MIME type and creates the matching file extension.

Playback and download

Completed recordings are available as Blob, File and object URL and can be played back, uploaded or downloaded immediately.

Safe resource cleanup

Media streams, timers, object URLs, Web Audio analysis resources and subscriptions are cleaned up reliably, including framework unmounts and React Strict Mode.

Live audio level monitoring

A normalized live microphone level between 0 and 1 provides responsive visual feedback while recording, with smoothing, pause handling and automatic cleanup.

Interactive example

Try the audio recorder

Use the ready-to-use recorder component directly in your browser and explore its recording states, live audio level indicator, playback controls and file download.

Loading audio recorder…
LIVE AUDIO RECORDER DEMO

Start a recording, watch the live microphone level, pause or resume it and play back or download the completed audio file.

Project structure

Available packages

The project is structured as a pnpm monorepo with separate packages for the recording core and its framework integrations.

@codeplayer71/audio-recorder-core

Framework-independent TypeScript core containing recording logic, live audio level analysis, browser format detection, state management, recording limits, typed errors and resource cleanup.

@codeplayer71/audio-recorder-vue

Vue integration with the useAudioRecorder composable and the ready-to-use JamItAudioRecorder component.

@codeplayer71/audio-recorder-react

React integration with the useAudioRecorder hook and the ready-to-use JamItAudioRecorder component, including Strict Mode-safe lifecycle handling.

@codeplayer71/audio-recorder-nuxt

Nuxt module that automatically provides useAudioRecorder, registers JamItAudioRecorder and includes the default component styles.

Getting started

Installation

Install only the package required by your application.

Core

Shell
pnpm add @codeplayer71/audio-recorder-core

Vue

Shell
pnpm add @codeplayer71/audio-recorder-vue

Nuxt

Shell
pnpm add @codeplayer71/audio-recorder-nuxt

React

Shell
pnpm add @codeplayer71/audio-recorder-react

Install the framework package required by your application or use the framework-independent core directly.

Framework integrations

Usage examples

Use the framework integration that matches your application or work directly with the framework-independent core.

Vue

Vue

Vue applications can use the ready-to-use JamItAudioRecorder component with its built-in live audio level indicator or build a custom interface with the useAudioRecorder composable.

Vue
<script setup lang="ts">
import { JamItAudioRecorder } from '@codeplayer71/audio-recorder-vue';
import '@codeplayer71/audio-recorder-vue/style.css';
</script>

<template>
  <JamItAudioRecorder />
</template>
Nuxt

Nuxt

Register the Nuxt module once to make the recorder component, composable and default styles available throughout the application, including live audio level support.

Configuration

TypeScript
export default defineNuxtConfig({
  modules: ['@codeplayer71/audio-recorder-nuxt'],
});

Usage

Vue
<template>
  <JamItAudioRecorder />
</template>

The module automatically imports useAudioRecorder, registers JamItAudioRecorder and includes the default Vue component styles.

React

React

React applications can use the ready-to-use JamItAudioRecorder component with its built-in live audio level indicator or build a custom interface with the useAudioRecorder hook.

TSX
import { JamItAudioRecorder } from '@codeplayer71/audio-recorder-react';
import '@codeplayer71/audio-recorder-react/style.css';

export function Recorder() {
  return <JamItAudioRecorder />;
}
TypeScript

Vanilla TypeScript

The framework-independent core can be used directly in any browser application without Vue, React or another frontend framework.

TypeScript
import { createAudioRecorder } from '@codeplayer71/audio-recorder-core';

const recorder = createAudioRecorder({
  maxDurationMs: 120_000,
  maxFileSizeBytes: 10_000_000,
});

const unsubscribe = recorder.subscribe((snapshot) => {
  console.log(snapshot.state);
  console.log(snapshot.durationMs);
  console.log(snapshot.recording);
  console.log(snapshot.error);
});

await recorder.start();

const recording = await recorder.stop();

console.log(recording.file);
console.log(recording.url);

unsubscribe();
recorder.destroy();
Headless API

Build your own interface

The ready-to-use components are optional. Applications that require a completely individual interface can work directly with the Vue composable, React hook or framework-independent core API.

Each integration exposes the current recorder snapshot, normalized live audio level, duration, completed recording, typed errors and the complete set of recording actions.

TypeScript
const {
  snapshot,
  start,
  pause,
  resume,
  stop,
  cancel,
  reset,
} = useAudioRecorder();
Customization

Customizable by design

The ready-to-use Vue and React components provide a professional and responsive interface without forcing applications to use a fixed visual style.

01

Props

Labels, recording limits, browser constraints and visible interface areas such as the live audio level indicator can be configured through typed component props.

Vue
<JamItAudioRecorder
  title="Record a voice message"
  start-label="Start"
  stop-label="Finish"
  download-label="Save recording"
  :max-duration-ms="60_000"
  :max-file-size-bytes="5_000_000"
  :show-cancel="false"
/>
02

CSS variables

Colors, spacing, border radii, icon sizes and audio level indicator styling can be customized without replacing the component structure.

CSS
.custom-recorder {
  --jamit-recorder-background: #0f172a;
  --jamit-recorder-color: #ffffff;
  --jamit-recorder-primary: #2dd4bf;
  --jamit-recorder-primary-hover: #14b8a6;
  --jamit-recorder-border-radius: 20px;
  --jamit-recorder-button-radius: 10px;
  --jamit-recorder-spacing: 28px;
  --jamit-recorder-icon-size: 20px;
}

Usage

Vue
<JamItAudioRecorder class="custom-recorder" />
03

Vue slots

Individual sections of the Vue component can be replaced through named slots while the recording state and actions remain available.

Vue
<JamItAudioRecorder>
  <template #header>
    <h2>Voice message</h2>
  </template>

  <template #controls="{ start, stop, isRecording }">
    <button
      v-if="!isRecording"
      type="button"
      @click="start"
    >
      Record
    </button>

    <button
      v-else
      type="button"
      @click="stop"
    >
      Finish
    </button>
  </template>
</JamItAudioRecorder>

Available slots include the header, status, duration, audio level, controls, error message, player, download action and footer. The React component provides equivalent customization through render props, including renderAudioLevel.

Browser support

Browser-aware recording

Audio recording is based on the browser MediaRecorder API. The resulting format depends on the MIME types supported by the browser, operating system and device.

Chromium-based browsers commonly create WebM files with the Opus codec, while Safari commonly provides MP4 audio. Firefox may provide Ogg or WebM depending on the available browser support.

The library does not simply rename recorded files. It checks supported formats at runtime and assigns the matching MIME type and file extension.

Project status

Production-ready audio recording

The recording core, direct Vanilla TypeScript usage, Vue and React integrations, ready-to-use recorder components and the Nuxt module are fully functional and ready for production use.

The project includes typed APIs, live audio level monitoring, framework-specific lifecycle handling, browser-aware format selection, configurable recording limits, reliable resource cleanup, automated tests and comprehensive documentation for installation, usage and customization.

Production ready
Open source

Explore the source code

The complete source code, package implementations, examples, documentation and release history are available in the public GitHub repository.

Open GitHub repository