Advertisements
HTML5 Audio
يتم استخدام عنصر <audio> لتضمين محتوى الصوت في المستندات لصفحات الويب.
استخدام عنصر الـ audio
يوفر عنصر <audio> المُدخل حديثًا طريقة قياسية لتضمين الصوت في صفحات الويب.
مثال للتوضيح:
<audio controls="controls" src="keyboard_audio.mp3">
Your browser does not support the HTML5 Audio element.
</audio>
فى المثال السابق قمنا بإدراج صوت في مستند HTML5 ، باستخدام مجموعة عناصر التحكم (controls) الافتراضية للمتصفح ، مع تحديد مصدر واحد بواسطة السمة src.
يظهر المحتوى الموجود داخل فتحة وغلق علامتى الـ audio كبديل في المتصفحات التي لا تدعم العنصر.
مثال أخر (مع إستخدام أكثر من مصدر):
<audio controls="controls">
<source src="keyboard_audio.mp3" type="audio/mpeg">
<source src="keyboard_audio.ogg" type="audio/ogg">
Your browser does not support the HTML5 Audio element.
</audio>
يحدد عنصر source وسائط متعددة لعناصر الوسائط(media) ، مثل video و audio.
تضيف سمة “controls” عناصر التحكم في الصوت ، مثل التشغيل والإيقاف المؤقت والصوت.
أنواع الوسائط Media Types
| (دعم المتصفحات) browsers support | (نوع الوسائط) Media Type | (تنسيق الملف) File Format |
|---|---|---|
| مدعوم من جميع المتصفحات، عدا Edge/IE | audio/wav | WAV |
| مدعوم من جميع المتصفحات | audio/mp3 | MP3 |
| مدعوم من جميع المتصفحات، عدا Safari و Edge/IE | audio/ogg | OGG |
ربط ملفات الصوت
يمكنك إنشاء روابط لملفاتك الصوتية وتشغيلها عن طريق وضع علامة عليها.
مثال للتوضيح:
<a href="track_1.mp3">Track 1</a>
<a href="track_2.mp3">Track 2</a>
<a href="track_3.mp3">Track 3</a>
سمات (attributes) عنصر الـ <audio>
| السمة | الوصف |
|---|---|
| audioTracks | تُرجع كائن AudioTrackList الذي يمثل المسارات الصوتية المتاحة. |
| autoplay | تشير هذه السمة ما إذا كان يجب بدء تشغيل الصوت بمجرد تحميله. |
| controls | إذا كانت هذه السمة موجودة ، فسيقوم المستعرض بتوفير عناصر تحكم للسماح للمستخدم بالتحكم في تشغيل الصوت ، بما في ذلك مستوى الصوت ، والبحث ، وإيقاف التشغيل مؤقتًا أو استئنافه. |
| controller | إرجاع كائن MediaController الذي يمثل وحدة التحكم الحالية في الوسائط للصوت. |
| crossorigin | تشير هذه السمة التي تم تعدادها إلى استخدام CORS لجلب ملف الصوت ذي الصلة. |
| currentTime | تُرجع قراءة CurrentTime قيمة موضع التشغيل الحالي ، بالثواني. |
| currentSrc | يُرجع عنوان URL الخاص بالصوت الحالي. |
| disableRemotePlayback | تُستخدم لتعطيل إمكانية التشغيل عن بُعد في الأجهزة المتصلة باستخدام التقنيات السلكية (HDMI و DVI) والتقنيات اللاسلكية (Miracast و Chromecast و DLNA و AirPlay ، إلخ). |
| defaultMuted | تعيين أو إرجاع ما إذا كان يجب كتم الصوت افتراضيًا. |
| playbackRate | يضبط سرعة تشغيل الصوت. |
| defaultPlaybackRate | يضبط أو يعيد السرعة الافتراضية لتشغيل الصوت. |
| ended | يُرجع ما إذا كان تشغيل الصوت قد انتهى أم لا. |
| loop | إذا تم تحديدها ، فسيعود مشغل الصوت تلقائيًا إلى البداية عند الوصول إلى نهاية الصوت. |
| muted | تشير هذه السمة ما إذا كان سيتم كتم الصوت في البداية. قيمته الافتراضية هي false. |
| preload | تشير هذه السمة ما إذا كان يجب تحميل الصوت عند تحميل الصفحة. |
| src | تشير هذه السمة إلى عنوان URL الخاص بالصوت المراد تضمينه. |
| buffered | إرجاع كائن TimeRanges يمثل الأجزاء المخزنة مؤقتًا من الصوت. |
| mediaGroup | يعين المجموعة التي ينتمي إليها الصوت (تُستخدم لربط عدة عناصر صوت). |
| networkState | يُرجع حالة الشبكة الحالية للصوت. |
| readyState | يعيد حالة الاستعداد الحالية للصوت. |
| startDate | إرجاع كائن تاريخ يمثل offset الوقت الحالي. |
| volume | يضبط أو يعيد صوت الصوت. |
أحداث(Events) عنصر الـ <audio>
| الحدث | الوصف |
|---|---|
| loadeddata | يعمل عندما يقوم المتصفح بتحميل الإطار الحالي للصوت. |
| loadedmetadata | يعمل عندما يقوم المتصفح بتحميل بيانات التعريف الخاصة بالصوت. |
| loadstart | يعمل عندما يبدأ المتصفح في البحث عن الصوت. |
| play | يعمل عند بدأ التشغيل. |
| playing | يعمل عندما يكون التشغيل جاهز للبدء بعد الإيقاف المؤقت أو التأخير بسبب نقص البيانات. |
| progress | يعمل عندما يقوم المتصفح بتنزيل الصوت. |
| canplay | يعمل عندما يكون المتصفح قادر على تشغيل الوسائط. |
| canplaythrough | يعمل عندما يمكن للمتصفح تشغيل الصوت دون التوقف للتخزين المؤقت. |
| pause | يعمل عند إيقاف التشغيل مؤقتًا. |
| waiting | يعمل عند توقف التشغيل بسبب نقص مؤقت في البيانات. |
| ended | يعمل عند انتهاء قائمة التشغيل الحالية. |
| emptied | يعمل عندما تكون قائمة التشغيل الحالية فارغة. |
| abort | يعمل عندما يتم إلغاء تحميل الصوت. |
| audioprocess | يعمل عندما يكون مخزن الإدخال المؤقت لـ ScriptProcessorNode جاهز للمعالجة. |
| durationchange | يعمل عندما يتم تحديث سمة المدة (duration). |
| error | يعمل عند حدوث خطأ أثناء تحميل الصوت. |
| ratechange | يعمل عندما تتغير سرعة تشغيل الصوت. |
| seeked | يعمل عندما ينتهي المستخدم من التحرك أو التخطي إلى موضع جديد في الصوت. |
| seeking | يعمل عندما يبدأ المستخدم في التحرك أو التخطي إلى موضع جديد في الصوت. |
| stalled | يعمل عندما يحاول المستعرض الحصول على بيانات الوسائط ، لكن البيانات غير متوفرة. |
| suspend | يعمل عندما لا يحصل المتصفح عمدًا على بيانات الوسائط. |
| volumechange | يعمل عند تغيير مستوى الصوت. |
| timeupdate | يعمل عندما يتغير وضع التشغيل الحالي. |
دعم المتصفحات لعنصر <audio>
| المتصفح | Firefox | Chrome | Internet Explorer | Safari | Opera |
| من بداية الإصدار | 3.5 | 4.0 | 9.0 | 4.0 | 10.5 |
تحدد الأرقام الموجوده في الجدول السابقة إصدار المستعرض الأول الذي يدعم عنصر audio بشكل كامل.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!
Advertisements