الثيم كنز

المكوّنات

مشغّل الصوت

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

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

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

npx ritla add audio-player

ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/audio-player

التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

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

أمثلة

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

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

احصل على الكود ›

مرجع الخصائص

AudioPlayer

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

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

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

ARIA

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

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

ينعكس

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

لا ينعكس

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

الأرقام: المدة بأرقام المنتج؛ أوقات المتصفح بأرقامه.
الخط العربي: العنوان label-14 بوزن Semibold، والمدة body-12 بلون txt-muted.
النص ثنائي الاتجاه: المدة معزولة باتجاه LTR، والمشغّل نفسه dir="ltr".