# مشغّل الصوت

> يعتمد على مشغّل المتصفح: عنوان ظاهر، ومدة الصوت قبل التشغيل، ونص مكتوب للكلام، لرسالة مسجّلة أو نطق كلمة.

الصفحة: https://ritla.app/ar/ui/audio-player

## التثبيت

يُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

```bash
npx ritla add audio-player
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/audio-player
```

## الاستخدام

```tsx
import { AudioPlayer } from "@/components/ui/audio-player";

<AudioPlayer
  src="/messages/support.mp3"
  title="Voice message from support"
  length="0:08"
  transcript={<p>Hello from Kanz support. Your transfer is complete.</p>}
/>
```

## أمثلة

### مشغّل واحد في كل مرة

تشغيل صوت يوقف الآخر. والصوت الذي لا كلام فيه لا يحتاج نصًا مكتوبًا.

معاينة حيّة: https://ritla.app/_kanz/preview/arabic/audio-player-sound

## مرجع الخصائص

### `AudioPlayer`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `src` | `string` | لا يوجد | ملف الصوت. |
| `title` | `ReactNode` | لا يوجد | عنوان ظاهر يقول ما هذا الصوت، وهو اسم المشغّل. |
| `length` | `string` | لا يوجد | المدة قبل التشغيل («1:23»)؛ دونها تُقرأ من بيانات الملف. |
| `transcript` | `ReactNode` | لا يوجد | النص المكتوب للكلام، تحت المشغّل في قسم قابل للطي. بلغة الصوت نفسه. |

## إمكانية الوصول

لوحة المفاتيح (المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين، ويتبادل السهمان في الاتجاه من اليمين إلى اليسار):

- `Tab`: إلى عناصر تحكم المتصفح؛ مفاتيحها مدمجة فيه.

ARIA:

- عناصر تحكم المتصفح الأصلية متاحة للوحة المفاتيح وقارئ الشاشة، فلا تُخفى ولا تُستبدل.
- المشغّل يأخذ اسمه من العنوان الظاهر، والمدة تُقرأ بكلمة «المدة».
- لا تشغيل تلقائي، وتشغيل مشغّل يوقف الآخر.

## ملاحظات العربية والاتجاه

ينعكس:

- العنوان يتبع الصفحة: على اليمين بالخطوط العربية. والنص المكتوب بلغة الصوت واتجاهه.

لا ينعكس:

- عناصر تحكم المتصفح: التشغيل على اليسار، والخط الزمني يمتلئ من اليسار إلى اليمين، والأوقات من اليسار إلى اليمين.
- تلميحات عناصر التحكم بلغة المتصفح لا الصفحة.

الأرقام: المدة بأرقام المنتج؛ أوقات المتصفح بأرقامه.

الخط العربي: العنوان `label-14` بوزن Semibold، والمدة `body-12` بلون `txt-muted`.

النص ثنائي الاتجاه: المدة معزولة باتجاه LTR، والمشغّل نفسه `dir="ltr"`.