Audio Playerv1.0.0
پخش‌کنندهٔ صوت برای پیام صوتی، فایل صوتی بارگذاری‌شده یا ضبط تازه. سه حالت دیده‌شدنی دارد: آمادهٔ پخش با مدت کل، در حال پخش با دکمهٔ مکث و زمان جاری، و مکث‌شده در همان نقطه. زمان با ارقام فارسی است و فقط یک پخش‌کننده در صفحه هم‌زمان پخش می‌کند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/audio-player.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/audio-player.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/audio-player.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/audio-player.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { AudioPlayer } from "@/components/ui/audio-player"
<AudioPlayer src={url} title="پیام صوتی" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
زیر پخش‌کننده یک تگ audio بومی است و حالت‌ها از رویدادهای خود آن می‌آیند: idle پیش از اولین پخش، playing، paused و ended. با onStateChange می‌توانید مثلاً پیام را «شنیده‌شده» علامت بزنید.
نوار زمان همان Slider دیگ است، پس با جهت‌نماها جلو و عقب می‌رود. نوار و زمان حتی در صفحهٔ راست‌به‌چپ چپ‌به‌راست‌اند، چون زمان در همهٔ پخش‌کننده‌ها از چپ به راست جلو می‌رود؛ آیکون پخش هم به همین دلیل قرینه نمی‌شود. شروع هر پخش‌کننده بقیهٔ پخش‌کننده‌های صفحه را مکث می‌کند.
دسترس‌پذیری
- کل پخش‌کننده یک group با برچسب عنوان صوت است.
- دکمهٔ پخش برچسب «پخش پیام صوتی» یا «مکث پیام صوتی» و aria-pressed دارد.
- نوار زمان یک slider با برچسب «زمان پخش …» است؛ جهت‌نماها، Home و End کار می‌کنند.
- اگر فایل قابل پخش نباشد، دکمه غیرفعال می‌شود و پیام فارسی جای نوار زمان می‌نشیند.
مرجع API
AudioPlayer
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| src | string | — | آدرس فایل صوتی یا object URL یک ضبط. |
| title | string | — | عنوان صوت؛ برچسب دکمه‌ها و نوار زمان هم از آن ساخته می‌شود. |
| duration | number | — | مدت به ثانیه، وقتی از قبل معلوم است. |
| variant | "default" | "ghost" | "default" | با قاب کارت، یا بدون قاب برای داخل حباب چت. |
| size | "sm" | "default" | "default" | اندازهٔ دکمهٔ پخش. |
| onStateChange | (state: "idle" | "playing" | "paused" | "ended") => void | — | با هر تغییر حالت پخش. |
توابع کمکی
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| formatDuration | (seconds: number) => string | — | «۱:۰۴» یا «۱:۰۲:۳۰» با ارقام فارسی. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
بدون قاب (ghost)
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
مدت از پیش معلوم (duration)
وقتی مدت را از سرور دارید، بدهید تا پیش از بارگذاری فایل هم «۰:۴۵» دیده شود؛ preload فقط متادیتا را می‌گیرد، نه کل فایل را.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
فهرست پیام‌ها
با شروع هر پیام، پیامی که در حال پخش بود خودکار مکث می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
فایل خراب (Error)
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| بدون قاب (ghost) | داخل حباب چت یا کارت دیگری که خودش قاب دارد |
| مدت از پیش معلوم (duration) | وقتی مدت را از سرور دارید، بدهید تا پیش از بارگذاری فایل هم «۰:۴۵» دیده شود؛ preload فقط متادیتا را می‌گیرد، نه کل فایل را. |
| فهرست پیام‌ها | صندوق پیام صوتی یا تاریخچهٔ تماس |
| فایل خراب (Error) | لینک منقضی یا قالب پشتیبانی‌نشده |