JamIT
Razgovarajmo o projektu
Open-source paket

jamit-audio-recorder

Moderna biblioteka za snimanje zvuka prilagođena za Vue, Nuxt, React i Vanilla TypeScript.

Biblioteka nudi framework-nezavisni core za snimanje, potpuno tipizirane integracije za moderne frontend frameworke i gotove recorder komponente koje se mogu prilagoditi individualnom dizajnu aplikacije.

Pogledajte na GitHubu Pogledajte demo
Pregled

Snimanje zvuka bez vezivanja za framework

jamit-audio-recorder je modularno rješenje za snimanje zvuka u modernim web aplikacijama. Framework-nezavisni core sadrži kompletnu logiku snimanja, dok posebni paketi pružaju praktične integracije za Vue, Nuxt i React.

Developeri mogu koristiti headless API za izradu potpuno individualnog korisničkog interfejsa ili gotove recorder komponente za Vue i React s dobro odabranim početnim postavkama, responzivnim stilovima i brojnim mogućnostima prilagođavanja.

Funkcionalnosti

Glavne funkcionalnosti

Modularna osnova za snimanje s tipiziranim API-jima, framework integracijama, gotovim komponentama i pouzdanim upravljanjem resursima preglednika.

Kompletan ciklus snimanja

Pokrenite, pauzirajte, nastavite, završite, otkažite i resetujte snimanje zvuka putem dosljednog i potpuno tipiziranog API-ja.

Framework-nezavisni core

Centralna logika snimanja ne zavisi od Vuea, Reacta ili Nuxta i može se direktno koristiti s Vanilla TypeScriptom.

Tipizirane framework integracije

Posebni composables i hookovi pružaju reaktivno upravljanje stanjem, tipizirane recorder akcije i automatsko čišćenje lifecycle resursa za Vue, Nuxt i React.

Gotove komponente

Koristite profesionalne recorder komponente za Vue i React ili prilagodite pojedine dijelove putem propsa, Vue slotova, React render propsa i CSS varijabli.

Ograničenja snimanja

Podesite maksimalno trajanje snimanja i maksimalnu veličinu datoteke. Prekoračenja se prikazuju kroz tipizirana stanja greške.

Audio formati prilagođeni pregledniku

Biblioteka provjerava formate koje trenutni preglednik podržava, bira odgovarajući MIME tip i kreira odgovarajuću ekstenziju datoteke.

Reprodukcija i preuzimanje

Završeni snimci dostupni su kao Blob, File i object URL te se mogu odmah reproducirati, poslati ili preuzeti.

Sigurno čišćenje resursa

Media streamovi, timeri, object URL-ovi, resursi za Web Audio analizu i subscriptions pouzdano se čiste, uključujući framework unmount i React Strict Mode.

Live nivo zvuka

Normalizovani live nivo mikrofona između 0 i 1 pruža direktan vizuelni prikaz tokom snimanja, uz zaglađivanje, pravilno ponašanje pri pauzi i automatsko čišćenje resursa.

Interaktivni primjer

Isprobajte audio recorder

Koristite gotovu recorder komponentu direktno u pregledniku i isprobajte stanja snimanja, live nivo zvuka, kontrole reprodukcije i preuzimanje datoteke.

Loading audio recorder…
LIVE AUDIO RECORDER DEMO

Pokrenite snimanje, pratite live nivo mikrofona, pauzirajte ga ili nastavite te reproducirajte ili preuzmite završenu audio datoteku.

Struktura projekta

Dostupni paketi

Projekt je organizovan kao pnpm monorepo s odvojenim paketima za recording core i njegove framework integracije.

@codeplayer71/audio-recorder-core

Framework-nezavisni TypeScript core koji sadrži logiku snimanja, live analizu nivoa zvuka, prepoznavanje audio formata preglednika, upravljanje stanjem, ograničenja snimanja, tipizirane greške i čišćenje resursa.

@codeplayer71/audio-recorder-vue

Vue integracija s useAudioRecorder composableom i gotovom JamItAudioRecorder komponentom.

@codeplayer71/audio-recorder-react

React integracija s useAudioRecorder hookom i gotovom JamItAudioRecorder komponentom, uključujući lifecycle upravljanje sigurno za Strict Mode.

@codeplayer71/audio-recorder-nuxt

Nuxt modul koji automatski omogućava useAudioRecorder, registruje JamItAudioRecorder i uključuje zadane stilove komponente.

Početak rada

Instalacija

Instalirajte samo paket koji je potreban vašoj aplikaciji.

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

Instalirajte framework paket koji je potreban vašoj aplikaciji ili direktno koristite framework-nezavisni core.

Framework integracije

Primjeri korištenja

Koristite integraciju koja odgovara vašoj aplikaciji ili radite direktno s framework-nezavisnim coreom.

Vue

Vue

Vue aplikacije mogu koristiti gotovu JamItAudioRecorder komponentu s ugrađenim live nivoom zvuka ili izraditi vlastiti interfejs pomoću useAudioRecorder composablea.

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

Registrujte Nuxt modul jednom kako bi recorder komponenta, composable, zadani stilovi i podrška za live nivo zvuka bili dostupni u cijeloj aplikaciji.

Konfiguracija

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

Korištenje

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

Modul automatski importuje useAudioRecorder, registruje JamItAudioRecorder i uključuje zadane stilove Vue komponente.

React

React

React aplikacije mogu koristiti gotovu JamItAudioRecorder komponentu s ugrađenim live nivoom zvuka ili izraditi vlastiti interfejs pomoću useAudioRecorder hooka.

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

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

Vanilla TypeScript

Framework-nezavisni core može se direktno koristiti u bilo kojoj browser aplikaciji bez Vuea, Reacta ili drugog frontend frameworka.

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

Izradite vlastiti interfejs

Gotove komponente nisu obavezne. Aplikacije kojima je potreban potpuno individualan interfejs mogu direktno koristiti Vue composable, React hook ili framework-nezavisni core API.

Svaka integracija omogućava pristup trenutnom recorder snapshotu, normalizovanom live nivou zvuka, trajanju snimanja, završenom snimku, tipiziranim greškama i kompletnom skupu recorder akcija.

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

Dizajnirano za prilagođavanje

Gotove komponente za Vue i React pružaju profesionalan i responzivan interfejs bez nametanja fiksnog vizuelnog stila aplikaciji.

01

Props

Nazivi, ograničenja snimanja, browser constraints i vidljivi dijelovi interfejsa, poput live nivoa zvuka, mogu se podesiti putem tipiziranih component propsa.

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 varijable

Boje, razmaci, border radius, veličine ikona i izgled indikatora nivoa zvuka mogu se prilagoditi bez zamjene strukture komponente.

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;
}

Korištenje

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

Vue slotovi

Pojedini dijelovi Vue komponente mogu se zamijeniti putem named slotova, dok stanje snimanja i akcije ostaju dostupni.

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>

Dostupni slotovi uključuju header, status, trajanje, nivo zvuka, kontrole, poruku o grešci, player, download akciju i footer. React komponenta nudi odgovarajuće mogućnosti prilagođavanja putem render propsa, uključujući renderAudioLevel.

Podrška preglednika

Snimanje prilagođeno pregledniku

Snimanje zvuka zasniva se na MediaRecorder API-ju preglednika. Rezultirajući format zavisi od MIME tipova koje podržavaju preglednik, operativni sistem i uređaj.

Preglednici zasnovani na Chromiumu najčešće kreiraju WebM datoteke s Opus kodekom, dok Safari najčešće koristi MP4 audio. Firefox može koristiti Ogg ili WebM, zavisno od dostupne podrške preglednika.

Biblioteka ne mijenja samo naziv snimljene datoteke. Ona tokom izvođenja provjerava podržane formate i dodjeljuje odgovarajući MIME tip i ekstenziju datoteke.

Status projekta

Audio snimanje spremno za produkciju

Recording core, direktno korištenje s Vanilla TypeScriptom, Vue i React integracije, gotove recorder komponente i Nuxt modul potpuno su funkcionalni i spremni za produkcijsku upotrebu.

Projekt uključuje tipizirane API-je, live nivo zvuka, lifecycle upravljanje prilagođeno pojedinim frameworkovima, browser-aware odabir formata, podesiva ograničenja snimanja, pouzdano čišćenje resursa, automatizovane testove i detaljnu dokumentaciju za instalaciju, korištenje i prilagođavanje.

Spremno za produkciju
Open source

Istražite izvorni kod

Kompletan izvorni kod, implementacije paketa, primjeri, dokumentacija i historija izdanja dostupni su u javnom GitHub repozitoriju.

Otvorite GitHub repozitorij