دکمه‌ی ضبطِ صدا که مثل پیام‌رسان‌ها باز می‌شه: نگهش می‌داری، موجِ صدا نشون می‌ده، و برای لغو به کنار می‌کشی.

وابستگی‌ها

نوع تعامل

دکمه رو نگه دار تا ضبط شروع شه؛ همون‌جا زمان و موجِ صدا باز می‌شه. اگه انگشت رو به سمتِ لغو بکشی، رنگ و متن هشدار می‌دن و رهاکردن توی اون حالت ضبط رو لغو می‌کنه، نه این‌که بفرسته. با صفحه‌کلید Space شروع و Escape لغو می‌کنه.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

نصب

{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

نمونه

"use client";

import VoicePill from "@/components/farsify/voice-pill";

export function VoiceNote() {
  return (
    <VoicePill
      mode="hold"
      ariaLabel="ضبط پیام صوتی"
      onStop={({ reason, duration }) =>
        console.log(reason, duration)
      }
    />
  );
}

// خاموش‌کردنِ لغو با کشیدن و ظاهرِ گوشه‌گرد
<VoicePill
  shape="rounded"
  size={52}
  slideToCancel={false}
  accentColor="var(--color-brand)"
  reactive="mic"
/>

نکته‌ها

• حالتِ mic میکروفونِ واقعی می‌خواد و مرورگر اجازه می‌گیره؛ برای دمو حالتِ simulated بی‌دردسره.
• برای دکمه‌ای که با یه بار زدن شروع و با یه بار زدن تموم شه، حالتِ toggle بذار.
• اگه لغو با کشیدن رو خاموش کنی، کاربر فقط با رهاکردن می‌تونه ضبط رو تموم کنه.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.