Vollständiger Aufnahmeablauf
Audioaufnahmen können über eine einheitliche und vollständig typisierte API gestartet, pausiert, fortgesetzt, beendet, abgebrochen und zurückgesetzt werden.
Open-Source-Paket
jamit-audio-recorder
Eine moderne und frameworkfreundliche Audio-Recorder-Bibliothek für Vue, Nuxt, React und Vanilla TypeScript.
Die Bibliothek bietet einen frameworkunabhängigen Aufnahme-Core, vollständig typisierte Integrationen für moderne Frontend-Frameworks und einsatzbereite Recorder-Komponenten, die an individuelle Anwendungsdesigns angepasst werden können.
Überblick
Audioaufnahmen ohne Framework-Bindung
jamit-audio-recorder ist eine modulare Lösung für Audioaufnahmen in modernen Webanwendungen. Der frameworkunabhängige Core enthält die vollständige Aufnahmelogik, während eigene Pakete komfortable Integrationen für Vue, Nuxt und React bereitstellen.
Entwickler können die Headless-API verwenden, um eine vollständig individuelle Oberfläche zu erstellen, oder einsatzbereite Recorder-Komponenten für Vue und React mit sinnvollen Standardwerten, responsivem Styling und umfangreichen Anpassungsmöglichkeiten einsetzen.
Funktionen
Zentrale Funktionen
Eine modulare Aufnahmebasis mit typisierten APIs, Framework-Integrationen, einsatzbereiten Komponenten und zuverlässiger Verwaltung von Browser-Ressourcen.
Frameworkunabhängiger Core
Die zentrale Aufnahmelogik ist unabhängig von Vue, React und Nuxt und kann auch direkt mit Vanilla TypeScript verwendet werden.
Typisierte Framework-Integrationen
Eigene Composables und Hooks bieten reaktives State Management, typisierte Recorder-Aktionen und automatische Lifecycle-Bereinigung für Vue, Nuxt und React.
Einsatzbereite Komponenten
Verwende professionelle Recorder-Komponenten für Vue und React oder passe einzelne Bereiche über Props, Vue-Slots, React-Render-Props und CSS-Variablen an.
Aufnahmelimits
Die maximale Aufnahmedauer und Dateigröße können konfiguriert werden. Überschreitungen werden über typisierte Fehlerzustände bereitgestellt.
Browserabhängige Audioformate
Die Bibliothek prüft die vom aktuellen Browser unterstützten Formate, wählt einen geeigneten MIME-Typ und erzeugt die passende Dateiendung.
Wiedergabe und Download
Fertige Aufnahmen stehen als Blob, File und Object-URL zur Verfügung und können sofort wiedergegeben, hochgeladen oder heruntergeladen werden.
Sichere Ressourcenbereinigung
Media-Streams, Timer, Object-URLs, Web-Audio-Analyse-Ressourcen und Subscriptions werden zuverlässig bereinigt, einschließlich Framework-Unmounts und React Strict Mode.
Live-Audiopegel
Ein normalisierter Live-Mikrofonpegel zwischen 0 und 1 bietet während der Aufnahme direktes visuelles Feedback mit Glättung, sauberem Pause-Verhalten und automatischer Ressourcenbereinigung.
Interaktives Beispiel
Audio-Recorder ausprobieren
Verwende die einsatzbereite Recorder-Komponente direkt im Browser und teste Aufnahmezustände, den Live-Audiopegel, Wiedergabesteuerung und Dateidownload.
Loading audio recorder…
LIVE-AUDIO-RECORDER-DEMOStarte eine Aufnahme, beobachte den Live-Mikrofonpegel, pausiere oder setze sie fort und spiele die fertige Audiodatei ab oder lade sie herunter.
Projektstruktur
Verfügbare Pakete
Das Projekt ist als pnpm-Monorepo mit getrennten Paketen für den Aufnahme-Core und seine Framework-Integrationen aufgebaut.
@codeplayer71/audio-recorder-core
Frameworkunabhängiger TypeScript-Core mit Aufnahmelogik, Live-Audiopegel-Analyse, Browser-Formaterkennung, State Management, Aufnahmelimits, typisierten Fehlern und Ressourcenbereinigung.
@codeplayer71/audio-recorder-vue
Vue-Integration mit dem useAudioRecorder-Composable und der einsatzbereiten JamItAudioRecorder-Komponente.
@codeplayer71/audio-recorder-react
React-Integration mit dem useAudioRecorder-Hook und der einsatzbereiten JamItAudioRecorder-Komponente einschließlich Strict-Mode-sicherem Lifecycle-Handling.
@codeplayer71/audio-recorder-nuxt
Nuxt-Modul, das useAudioRecorder automatisch bereitstellt, JamItAudioRecorder registriert und die Standard-Styles der Komponente einbindet.
Erste Schritte
Installation
Installiere nur das Paket, das deine Anwendung benötigt.
Core
Shell
pnpm add @codeplayer71/audio-recorder-coreVue
Shell
pnpm add @codeplayer71/audio-recorder-vueNuxt
Shell
pnpm add @codeplayer71/audio-recorder-nuxtReact
Shell
pnpm add @codeplayer71/audio-recorder-reactInstalliere das Framework-Paket, das deine Anwendung benötigt, oder verwende den frameworkunabhängigen Core direkt.
Framework-Integrationen
Anwendungsbeispiele
Verwende die passende Framework-Integration oder arbeite direkt mit dem frameworkunabhängigen Core.
Vue
Vue
Vue-Anwendungen können die einsatzbereite JamItAudioRecorder-Komponente mit integriertem Live-Audiopegel verwenden oder mit dem useAudioRecorder-Composable eine eigene Oberfläche erstellen.
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
Registriere das Nuxt-Modul einmalig, damit die Recorder-Komponente, das Composable, die Standard-Styles und die Live-Audiopegel-Unterstützung in der gesamten Anwendung verfügbar sind.
Konfiguration
TypeScript
export default defineNuxtConfig({
modules: ['@codeplayer71/audio-recorder-nuxt'],
});Verwendung
Vue
<template>
<JamItAudioRecorder />
</template>Das Modul importiert useAudioRecorder automatisch, registriert JamItAudioRecorder und bindet die Standard-Styles der Vue-Komponente ein.
React
React
React-Anwendungen können die einsatzbereite JamItAudioRecorder-Komponente mit integriertem Live-Audiopegel verwenden oder mit dem useAudioRecorder-Hook eine eigene Oberfläche erstellen.
TSX
import { JamItAudioRecorder } from '@codeplayer71/audio-recorder-react';
import '@codeplayer71/audio-recorder-react/style.css';
export function Recorder() {
return <JamItAudioRecorder />;
} TypeScript
Vanilla TypeScript
Der frameworkunabhängige Core kann direkt in jeder Browseranwendung ohne Vue, React oder ein anderes Frontend-Framework verwendet werden.
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
Eigene Oberfläche erstellen
Die einsatzbereiten Komponenten sind optional. Anwendungen mit einer vollständig individuellen Oberfläche können direkt mit dem Vue-Composable, dem React-Hook oder der frameworkunabhängigen Core-API arbeiten.
Jede Integration stellt den aktuellen Recorder-Snapshot, den normalisierten Live-Audiopegel, die Aufnahmedauer, die fertige Aufnahme, typisierte Fehler und den vollständigen Satz an Recorder-Aktionen bereit.
TypeScript
const {
snapshot,
start,
pause,
resume,
stop,
cancel,
reset,
} = useAudioRecorder();Anpassung
Von Grund auf anpassbar
Die einsatzbereiten Komponenten für Vue und React bieten eine professionelle und responsive Oberfläche, ohne Anwendungen auf einen festen visuellen Stil zu beschränken.
Props
Beschriftungen, Aufnahmelimits, Browser-Constraints und sichtbare Bereiche der Oberfläche wie der Live-Audiopegel können über typisierte Component-Props konfiguriert werden.
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"
/>CSS-Variablen
Farben, Abstände, Border-Radien, Icon-Größen und das Styling des Audiopegel-Indikators können angepasst werden, ohne die Komponentenstruktur zu ersetzen.
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;
}Verwendung
Vue
<JamItAudioRecorder class="custom-recorder" />Vue-Slots
Einzelne Bereiche der Vue-Komponente können über benannte Slots ersetzt werden, während der Aufnahmezustand und die Aktionen weiterhin verfügbar bleiben.
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>Verfügbare Slots umfassen Header, Status, Aufnahmedauer, Audiopegel, Bedienelemente, Fehlermeldung, Player, Download-Aktion und Footer. Die React-Komponente bietet entsprechende Anpassungsmöglichkeiten über Render-Props einschließlich renderAudioLevel.
Browserunterstützung
Browserabhängige Audioaufnahme
Die Audioaufnahme basiert auf der MediaRecorder-API des Browsers. Das erzeugte Format hängt von den MIME-Typen ab, die Browser, Betriebssystem und Gerät unterstützen.
Chromium-basierte Browser erzeugen üblicherweise WebM-Dateien mit dem Opus-Codec, während Safari meist MP4-Audio bereitstellt. Firefox kann abhängig von der verfügbaren Browserunterstützung Ogg oder WebM erzeugen.
Die Bibliothek benennt aufgenommene Dateien nicht einfach um. Sie prüft die unterstützten Formate zur Laufzeit und weist den passenden MIME-Typ sowie die passende Dateiendung zu.
Projektstatus
ProduktionsbereitProduktionsreife Audioaufnahme
Der Aufnahme-Core, die direkte Verwendung mit Vanilla TypeScript, die Vue- und React-Integrationen, die einsatzbereiten Recorder-Komponenten und das Nuxt-Modul sind vollständig funktionsfähig und für den produktiven Einsatz bereit.
Das Projekt bietet typisierte APIs, Live-Audiopegel, frameworkspezifisches Lifecycle-Handling, browserabhängige Formatauswahl, konfigurierbare Aufnahmelimits, zuverlässige Ressourcenbereinigung, automatisierte Tests und eine umfangreiche Dokumentation für Installation, Verwendung und Anpassung.
Open Source
GitHub-Repository öffnen Quellcode entdecken
Der vollständige Quellcode, die Paketimplementierungen, Beispiele, Dokumentation und Release-Historie sind im öffentlichen GitHub-Repository verfügbar.