عنصر الصوت

نمط «انقر للتشغيل» نفسه المتّبع في عنصر الفيديو، لكن للصوت: صورة معاينة في البريد، ومشغّل <audio> أصلي في العرض المباشر المستضاف. تناسب هذه الصيغة حلقات البودكاست، والملاحظات الصوتية، والمقاطع الصوتية القصيرة كلها — لا شيء منها يستطيع تطبيق البريد تشغيله مضمَّنًا، لكن العرض المباشر يستطيع.

آلية العمل

يتبع الانقسام نظيره في الفيديو تمامًا: فلا يستطيع أي تطبيق بريد تشغيل الصوت مضمَّنًا بأكثر مما يستطيع تشغيل الفيديو، لذا لا يوجد هنا مستوى حركي أيضًا. يعرض HTML البريد دائمًا معاينة ثابتة. فإن ضُبطت صورة الغلاف، فإنها تُعرض وسم <img> عاديًا بكامل العرض داخل رابط يؤدي مباشرة إلى الملف الصوتي. ودون غلاف، يُعرض بدلًا منه مربع نائب: مستطيل داكن مصمت يحمل الرمز ♪ والوصف تعليقًا له. النقر على أيٍّ من النسختين يفتح src مباشرة، وتُتتبَّع النقرة في الخريطة الحرارية للنقرات على مستوى العنصر، تمامًا كما في الفيديو.

أما العرض المباشر المستضاف فيضع مكانها عنصر <audio controls> حقيقيًا، يقوده المؤشر نفسه — وجود رابط URL الأساسي أو غيابه — الذي يفحصه كل مُخرِج يتفرّع حسب الواجهة الخلفية في الشيفرة. والموضع الوحيد الذي يختلف فيه الصوت فعلًا عن الفيديو: ليس لعنصر <audio> سمة poster كما لعنصر <video>، فلا يمكن إرفاق صورة الغلاف المضبوطة بالعنصر نفسه. وبدلًا من ذلك، حين تُضبط صورة غلاف، يضعها العرض المباشر وسم <img> عاديًا فوق مشغّل <audio> مباشرة داخل غلاف مشترك، بدلًا من فقدان الصورة كليًا في ذلك المستوى. ويحاكي هذا التخطيط — صورة الغلاف فوق عناصر التحكم — ما يستخدمه مشغّل الموسيقى أو البودكاست. ودون غلاف، يُعرض المشغّل وحده داخل إطار العنصر المنسَّق.

يأخذ العنصر رابط URL عاديًا في src — تستضيفه أنت؛ ولا يخزّن MailInApp الملفات الصوتية. أما صورة الغلاف فأمرها مختلف: فهي تأتي من مكتبة الوسائط، لذا تعرض لوحة الخصائص صورة مصغّرة وزر اختيار صورة… بدلًا من مربع لرابط URL. وإذا كان src فارغًا فلا يُعرض العنصر على الإطلاق، في أيٍّ من المستويين.

الحقول القابلة للضبط:

• رابط URL الصوت — الملف الذي ترتبط به معاينة البريد، وsrc لمشغّل العرض المباشر.
• صورة الغلاف (اختيارية) — صورة المعاينة في البريد، وصورة الغلاف في العرض المباشر الموضوعة فوق عناصر التحكم؛ وتُختار من مكتبة الوسائط.
• الوصف — يُستخدم تعليقًا للعنصر النائب (حين لا يُضبط غلاف)، وسمةَ aria-label لمشغّل العرض المباشر.
• العرض (%) — 10–100.
• لون الخلفية، والحشو، والحدّ، واستدارة الزوايا على الإطار.

والصوت، مثل الفيديو، محتوى خالص — لا تُتتبَّع مرات التشغيل، بل النقر نفسه فقط، عبر الخريطة الحرارية للنقرات نفسها التي يغذّيها كل عنصر عادي حامل لرابط.

أمثلة

يربط ملخّص بودكاست أسبوعي حلقة ذلك الأسبوع مع صورة غلافها صورةً للمعاينة، فيبدو العرض في البريد الوارد بطاقة ألبوم/حلقة رغم أن لا شيء يُشغَّل هناك مباشرة. ويُدرج تحديث للعملاء على نمط البريد الصوتي (رسالة قصيرة مسجّلة من مؤسس أو من مسؤول الدعم) دون أي صورة غلاف، معتمدًا على المربع النائب البسيط ووصف مثل «تحديث مدته 90 ثانية من رئيسنا التنفيذي». وتتضمن رسالة لتعلّم اللغات مقطعًا للنطق لكل كلمة من المفردات، كلٌّ منها في عنصر صوت صغير خاص به مصغّر عبر حقل العرض، فتتسع عدة عناصر منها بسهولة في رسالة واحدة.

كيف يبدو البديل الثابت

<a href="https://cdn.example.com/episode-42.mp3"
   style="display:block">
  <div style="box-sizing:border-box;overflow:hidden;width:100%;max-width:100%">
    <img src="https://cdn.example.com/episode-42-cover.jpg" alt="Episode 42: Shipping fast"
         style="display:block;width:100%;max-width:100%" />
  </div>
</a>

هذا هو مستوى البريد: صورة غلاف داخل رابط عادي إلى الملف الصوتي. أما العرض المباشر فيعرض بدلًا من ذلك عنصر <audio controls> حقيقيًا، مع صورة الغلاف نفسها فوقه حين تُضبط.

انظر أيضًا

• نظرة عامة على مرجع العناصر
• عنصر الفيديو
• روابط العرض المباشر
• التفاعلات والتحليلات