كيفية إضافة ميزة "استمع إلى هذا المقال" بالصوت العربي إلى موقعك الإلكتروني

يتيح زر "استمع إلى هذا المقال" للزوار الاستماع إلى محتوى الصفحة بدلًا من قراءته، سواء أثناء التنقل أو طهي الطعام أو لمجرد تفضيلهم الاستماع. لكن بالنسبة للمواقع العربية، يتطلب إتقان هذه الميزة ما هو أكثر من مجرد إدراج مشغل صوتي مخصص للإنجليزية؛ إذ يجب أن يصدر الصوت بنبرة عربية طبيعية، وأن يعمل المشغل بسلاسة من اليمين إلى اليسار.

يستعرض هذا الدليل العملية الكاملة مع أمثلة برمجية بنيناها واختبرناها عمليًا: بدءًا من استخراج النص المقروء من المقال العربي، وتوليد الصوت باستخدام تقنية تحويل النص إلى كلام باللغة العربية، ووصولًا إلى إضافة مشغل يدعم اتجاه اليمين إلى اليسار مع الحفاظ على سرعة تحميل الصفحة. وقد قسنا حجم البيانات الصوتية التي تُنزلها إعدادات المشغل المختلفة قبل أن يضغط المستخدم على زر التشغيل، وكانت النتيجة فارقًا يفوق توقعات معظم أصحاب المواقع.

ما هي ميزة الاستماع الصوتي "استمع إلى هذا المقال"؟

ميزة "استمع إلى هذا المقال" هي نسخة صوتية من صفحة الويب، تُنشأ عادةً باستخدام تقنية تحويل النص إلى كلام، وتُعرض عبر مشغل صوتي مدمج أعلى المقال. يضغط الزائر على زر التشغيل للاستماع إلى المقال مقروءًا بصوت واضح، بينما يبقى النص متاحًا على الصفحة لمن يفضل القراءة.

تعتمد المواقع الإخبارية والمدونات والمنصات التعليمية والبوابات الحكومية على هذه الميزة لأنها تخدم من لا يستطيعون القراءة على الشاشات أو يفضلون تجنبها. وبفضل أدوات توليد الصوت العربي الطبيعي بالذكاء الاصطناعي، يمكن إنتاج الصوت في دقائق معدودة بدلًا من حجز استوديو تسجيل لكل مقال. ويتناول دليل تحويل النص إلى كلام باللغة العربية لقطاع الإعلام كيفية توظيف الناشرين لهذه التقنية على نطاق واسع.

لماذا تضيف الصوت العربي إلى مقالاتك؟

يتيح الصوت العربي الاستفادة من مقالاتك لضعاف البصر، ولمن يجدون قراءة النصوص العربية الطويلة مجهدة على شاشة الهاتف، ولأولئك الراغبين في الاستماع أثناء أداء مهام أخرى. كما يمنح القراء الدائمين طريقة إضافية للتفاعل مع محتواك دون الحاجة إلى كتابة أي مادة جديدة.

تُعد إمكانية الوصول وحدها سببًا وجيهًا؛ إذ تُقدّر منظمة الصحة العالمية أن ما لا يقل عن 2.2 مليار شخص يعانون من ضعف في الرؤية القريبة أو البعيدة. وتُقبل المواقع الحكومية ومواقع الخدمات العامة في المنطقة على إضافة المحتوى الصوتي للسبب ذاته؛ راجع دليلنا حول تحويل النص إلى كلام باللغة العربية للخدمات الرقمية الحكومية. كما تستعين المنصات التعليمية بالنسخ الصوتية للمقالات لأغراض المراجعة، كما يوضح دليل تحويل النص إلى كلام للتعليم الإلكتروني.

كيف تحوّل مقالًا عربيًا إلى محتوى صوتي؟

لتحويل مقال عربي إلى صوت، استخرج متن المقال فقط، وهيئه للاستماع، ثم أنشئ الصوت بصوت عربي على أجزاء، واجمع هذه الأجزاء في ملف واحد وحوّله إلى صيغة MP3. ويمكن أتمتة هذه العملية بالكامل لتعمل تلقائيًا في كل مرة تنشر فيها محتوى جديدًا.

يتمثل الخطأ الأكثر شيوعًا في تمرير صفحة الويب بالكامل إلى نموذج الصوت، مما يؤدي إلى قراءة القوائم والتعليقات التوضيحية للصور ومربعات "اقرأ أيضًا" والتذييلات ضمن الملف الصوتي. يقرأ سكربت Python أدناه المحتوى الموجود داخل عنصر <article> فقط، متجاوزًا عناصر التنقل، والأشكال التوضيحية، والتعليقات، والأكواد، والجداول، والملاحظات الجانبية، وأسماء الكتّاب، كما يضيف وقفة مدتها ثانية واحدة بعد كل عنوان. بعد ذلك، يُولّد الصوت عبر Munsit على أجزاء ويدمجها في ملف WAV واحد.

article_to_audio.py
  """Turn the text of an Arabic web article into one audio file."""
  import hashlib
  import io
  import os
  import re
  import sys
  import wave
  from html.parser import HTMLParser
   
  import requests
   
  API_KEY = os.environ.get("MUNSIT_API_KEY", "")
  BASE_URL = os.environ.get("MUNSIT_BASE_URL", "https://api.munsit.com/api/v1")
  VOICE_ID = os.environ.get("MUNSIT_VOICE_ID", "YOUR_VOICE_ID")
  SKIP = {"nav", "aside", "figure", "figcaption", "pre", "code", "script",
          "style", "table", "footer", "form", "button"}
  SKIP_CLASSES = {"byline", "share", "related"}
  VOID = {"img", "br", "hr", "meta", "link", "input", "source", "wbr"}
  HEADINGS = {"h1", "h2", "h3"}
  BLOCKS = HEADINGS | {"p", "li", "blockquote"}
   
   
  class ArticleText(HTMLParser):
      """Collect readable text from <article>, skipping captions, code and asides."""
   
      def __init__(self):
          super().__init__()
          self.in_article = False
          self.stack = []          # True for elements whose text we skip
          self.parts = []
          self.current = ""
   
      def handle_starttag(self, tag, attrs):
          if tag in VOID:
              return
          classes = set((dict(attrs).get("class") or "").split())
          self.stack.append(tag in SKIP or bool(classes & SKIP_CLASSES))
          if tag == "article":
              self.in_article = True
   
      def handle_endtag(self, tag):
          if tag in VOID:
              return
          skipped = self.stack.pop() if self.stack else False
          if tag == "article":
              self.in_article = False
          if skipped or any(self.stack):
              self.current = "" if skipped else self.current
              return
          if tag in BLOCKS and self.current.strip():
              text = " ".join(self.current.split())
              if tag in HEADINGS:
                  text += '. <break time="1s"/>'   # pause after headings
              self.parts.append(text)
              self.current = ""
   
      def handle_data(self, data):
          if self.in_article and not any(self.stack):
              self.current += data
   
   
  def article_script(html):
      parser = ArticleText()
      parser.feed(html)
      return "\n".join(parser.parts)
   
   
  def split_text(text, max_chars=800):
      chunks, current = [], ""
      for line in text.splitlines():
          if current and len(current) + len(line) + 1 > max_chars:
              chunks.append(current)
              current = line
          else:
              current = f"{current}\n{line}".strip()
      return chunks + [current] if current else chunks
   
   
  def synthesize(text):
      r = requests.post(f"{BASE_URL}/text-to-speech/faseeh-v1-preview",
                        headers={"x-api-key": API_KEY},
                        json={"voice_id": VOICE_ID, "text": text,
                              "stability": 0.5, "dialect": "fusha"},
                        timeout=120)
      r.raise_for_status()
      return r.content
   
   
  def join_wavs(parts, path):
      with wave.open(path, "wb") as out:
          for i, data in enumerate(parts):
              with wave.open(io.BytesIO(data), "rb") as w:
                  if i == 0:
                      out.setparams(w.getparams())
                  out.writeframes(w.readframes(w.getnframes()))
   
   
  if __name__ == "__main__":
      html = open(sys.argv[1], encoding="utf8").read()
      script = article_script(html)
      version = hashlib.sha256(script.encode("utf8")).hexdigest()[:10]
      out = f"article_{version}.wav"          # new name only when the text changes
      if os.path.exists(out):
          print("Text unchanged, keeping", out)
          sys.exit()
      open(f"article_{version}.txt", "w", encoding="utf8").write(script)
      join_wavs([synthesize(c) for c in split_text(script)], out)
      print("Saved", out)

اختبرنا ذلك على نموذج لمقال مدونة باللغة العربية يحتوي على قائمة تنقل، واسم كاتب، وصورة مع تعليق توضيحي، ومربع لمقالات ذات صلة، ونموذج برمجي، وتذييل. احتفظ السكربت بالعنوان الرئيسي وعنوانين فرعيين وثلاث فقرات، واستبعد كل ما عدا ذلك. كما اختُبر توليد الصوت عبر نسخة محلية من نقطة النهاية (endpoint) الموثقة الخاصة بـ Munsit.

يتضمن اسم الملف بصمة رقمية (fingerprint) موجزة للنص؛ وبالتالي فإن إعادة تشغيل السكربت على مقال لم يطرأ عليه أي تغيير لن تستهلك أي موارد، بينما يؤدي تعديل المقال إلى إنشاء ملف جديد تلقائيًا. يضمن ذلك بقاء الصوت والنص متطابقين دائمًا دون الحاجة إلى إدارة يدوية معقدة.

كيف تهيئ المقال العربي للاستماع؟

هيئ المقال العربي للاستماع بكتابة الأرقام والتواريخ والأسعار بالحروف، وفك الاختصارات، والتأكد من إضافة وقفة قصيرة بعد كل عنوان. فالنصوص المكتوبة للقراءة بالعين غالبًا ما تتضمن اختصارات وصيغًا رقمية لا يمكن للصوت تفسيرها تلقائيًا بالطريقة التي يدركها القارئ.

• الأرقام والأسعار. اكتب الأرقام والبيانات الرئيسية بالحروف، على سبيل المثال "ألف ومئتا درهم" بدلًا من 1,200 AED.
• الاختصارات. اكتب الألقاب بالكامل مثل د. والرموز المختصرة مثل VAT.
• الجداول والمخططات. لخّصها في جملة أو جملتين، نظرًا لأن السكربت يتجاوزها تلقائيًا.
• مستوى اللغة. تُكتب معظم المقالات باللغة العربية الفصحى، لذا احرص على اختيار صوت يدعم الفصحى.

يوضح دليلنا حول كيفية عمل تحويل النص إلى كلام باللغة العربية بنبرة طبيعية دور علامات الترقيم والحركات الإعرابية في ضبط إيقاع الصوت.

ما هي الصيغة الصوتية وحجم الملف الأنسب للاستخدام؟

قدّم الملف الصوتي للمقال بصيغة MP3 بمعدل 64 kbps أحادي القناة (mono)؛ فهو يضمن وضوحًا صوتيًا ممتازًا للكلام مع حجم ملف صغير يناسب زوار الهواتف المحمولة. واحتفظ بملف WAV الأصلي الناتج من خدمة تحويل النص إلى كلام كنسخة رئيسية، وتجنب رفعه مباشرة على الصفحة.

تُحسب الأحجام بناءً على معدل البت (bit rate)؛ حيث بلغ حجم ملف الاختبار الذي تبلغ مدته 10 دقائق بمعدل 64 كيلوبت في الثانية 4.8 ميغابايت بالضبط. يُنتج Munsit ملفات صوتية بصيغة WAV، وتتيح أداة مجانية مثل ffmpeg أو Audacity تحويلها إلى MP3.

كيف تضيف مشغل صوت عربي إلى صفحة ويب؟

أبسط مشغل صوت عربي هو عنصر الصوت الافتراضي في المتصفح داخل حاوية باتجاه من اليمين إلى اليسار، مع تسمية توضيحية وضبط preload على none. ويعمل هذا المشغل على جميع المتصفحات الحديثة، ويدعم الوصول عبر لوحة المفاتيح افتراضيًا، ولا يحتاج إلى أي كود JavaScript.

  <figure dir="rtl" lang="ar">
    <figcaption>استمع إلى المقال (٨ دقائق)</figcaption>
    <audio controls preload="none" src="/audio/article.mp3">
      <a href="/audio/article.mp3">تنزيل الملف الصوتي</a>
    </audio>
  </figure>

يدعم عنصر audio إعداد التحميل المسبق (preload) الذي يتحكم في كمية الصوت التي يجلبها المتصفح قبل بدء التشغيل. وقد قسنا ذلك عمليًا: ففي صفحة تحتوي على ملف MP3 مدته 10 دقائق وحجمه 4.8 ميغابايت، لم يُحمّل Chromium أي بيانات مع preload="none"، بينما حمّل 1.0 ميغابايت مع preload="metadata"، و3.1 ميغابايت مع preload="auto" خلال أول أربع ثوانٍ من تحميل الصفحة، وقبل أن يضغط أي شخص على زر التشغيل.

معظم الزوار لن يضغطوا على زر التشغيل إطلاقًا، لذا فإن ضبط preload="none" يوفر استهلاك البيانات للجميع. المقابل هو أن المشغل لا يمكنه إظهار المدة الزمنية حتى يبدأ التشغيل، ولهذا السبب توضح التسمية التوضيحية مدة الاستماع مسبقًا.

إذا كنت تفضل مشغلًا بهوية مخصصة، فقد صممنا أيضًا مشغلًا مخصصًا خفيف الوزن بتسميات عربية، وشريط تقدم يتحرك من اليمين إلى اليسار، وزر للسرعة، وتحديد مرئي للتركيز عبر لوحة المفاتيح. واختبرناه في Chromium: لم يُحمّل أي صوت حتى بدء التشغيل، وتغيرت تسميته إلى "إيقاف مؤقت" أثناء التشغيل، وعدّل السرعة عند النقر، وتوقف مؤقتًا بالضغط على مفتاح المسافة.

كيف تضيف الصوت إلى المقالات العربية في WordPress؟

في WordPress، ارفع ملف MP3 إلى مكتبة الوسائط وأضفه باستخدام كتلة الصوت (Audio) الأساسية، أو الصق مقتطف المشغل في كتلة HTML مخصصة بالقرب من أعلى المقال. تعتمد كلتا الطريقتين على عنصر الصوت في المتصفح، لذا تنطبق عليهما القواعد نفسها فيما يخص التحميل المسبق والتشغيل التلقائي.

في إعدادات كتلة الصوت، عطّل التشغيل التلقائي واضبط preload على none. إذا كان قالب موقعك يدعم اللغة العربية، فسيتبع المشغل اتجاه الصفحة من اليمين إلى اليسار تلقائيًا؛ وإذا لم يكن كذلك، فاستخدم مقتطف HTML المخصص أعلاه، والذي يحدد الاتجاه بنفسه. بالنسبة للمواقع التي تنشر مقالات بكثرة، شغّل سكربت تحويل المقال إلى صوت عند نشر المقال وأرفق الملف تلقائيًا عبر WordPress REST API.

كيف تجعل مشغل الصوت العربي متاحًا وسهل الوصول؟

مشغل الصوت العربي المتاح وسهل الوصول لا يبدأ التشغيل تلقائيًا أبدًا، ويمكن تشغيله بالكامل عبر لوحة المفاتيح، ويوفر تسميات عربية تنطقها قارئات الشاشة بصورة صحيحة، ويوضع بجوار النص الكامل للمقال، حيث يعمل المقال نفسه بمثابة تفريغ نصي.

• بدون تشغيل تلقائي. يتطلب معيار النجاح 1.4.2 التحكم بالصوت في WCAG بمستوى A توفير طريقة لإيقاف مؤقت أو كلي لأي صوت يُشغّل تلقائيًا لأكثر من ثلاث ثوانٍ. وعدم تفعيل التشغيل التلقائي يجنبك المشكلة تمامًا.
• اللغة والاتجاه. اضبط lang="ar" وdir="rtl" على المشغل حتى تستخدم قارئات الشاشة صوتًا عربيًا لقراءة التسميات وتعمل عناصر التحكم بالاتجاه الصحيح.
• الوصول عبر لوحة المفاتيح. استخدم أزرارًا فعلية، وحافظ على إطار تركيز مرئي، وتأكد من أن مفتاح المسافة أو Enter يبدأ التشغيل ويوقفه مؤقتًا.
• التحكم في السرعة. يفضل بعض المستمعين وتيرة نطق أبطأ بينما يفضل آخرون وتيرة أسرع؛ وزر التحكم في السرعة يلبي رغبة الفئتين.

كيف تساعد محركات البحث على فهم المحتوى الصوتي؟

صف الملف الصوتي باستخدام مخطط schema.org عبر إضافة AudioObject إلى البيانات المنظمة للمقال، متضمنًا عنوان الملف وصيغته ومدته ولغته. يوضح هذا لمحركات البحث وأنظمة الذكاء الاصطناعي أن الصفحة تتضمن نسخة صوتية وما يحتويه هذا الملف.

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "كيف تبدأ الادخار في عشر خطوات",
    "inLanguage": "ar",
    "audio": {
      "@type": "AudioObject",
      "contentUrl": "https://example.com/audio/article.mp3",
      "encodingFormat": "audio/mpeg",
      "duration": "PT8M",
      "inLanguage": "ar"
    }
  }
  </script>

يُعد نوع AudioObject جزءًا من schema.org، ويقبله نوع Article عبر خاصية audio. كما تقدم Google أيضًا ترميز speakable للمحتوى الملائم للمساعدات الصوتية، لكن وثائق speakable تشير إلى أن الميزة تجريبية وتقتصر على مستخدمي اللغة الإنجليزية في الولايات المتحدة، وبالتالي لا تنطبق على الصفحات العربية حاليًا.

كيف تحافظ على تحديث صوت المقال باستمرار؟

أعد توليد الصوت كلما تغيّر نص المقال، وامنح كل إصدار اسم ملف جديدًا لضمان عدم تقديم المتصفحات أو ذاكرات التخزين المؤقت صوتًا قديمًا لنص جديد. وتضمين بصمة رقمية للنص في اسم الملف، كما في السكربت الخاص بنا، يضمن تنفيذ الأمرين تلقائيًا.

حتى التعديلات الطفيفة مثل تصحيح خطأ إملائي تُغيّر البصمة وتؤدي لإعادة إنشاء الملف الصوتي. وإذا كان ذلك يتكرر كثيرًا، فيمكنك توليد الصوت لكل قسم على حدة وإعادة توليد الأقسام التي تغيّرت فقط، ثم دمجها مجددًا.

ما الذي يقدمه Munsit لتحويل المقالات إلى صوت؟

يوفر Munsit أصواتًا عربية طبيعية بالفصحى واللهجات الخليجية، وAPI لأتمتة مسارات تحويل المقالات إلى صوت، وأداة تشكيل للنصوص بالفصحى التي تحتاج إلى ضبط بالحركات، وخطة مجانية برصيد 10,000 نقطة دون الحاجة لبطاقة بنكية. يُستهلك الرصيد بحسب عدد المحارف، لذا يتيح لك عدد محارف مقالك معرفة التكلفة التقريبية لصوته.

جرّب الأصوات لمقالاتك في استوديو Munsit لتحويل النص إلى كلام، وقارن اللهجات في دليل توليد الأصوات العربية بالذكاء الاصطناعي، وأتمت النشر باستخدام دليل API تحويل النص إلى كلام باللغة العربية للمطورين.

إخلاء المسؤولية

• تستند قياسات التحميل المسبق (preload) إلى صفحة اختبار واحدة تتضمن ملف MP3 مدته 10 دقائق في متصفح Chromium في وضع headless خلال أكتوبر 2026. قد تقوم المتصفحات والأجهزة وظروف الشبكة الأخرى بتنزيل كميات بيانات مختلفة.
• تم بناء واختبار سكربت تحويل المقال إلى صوت والمشغل المخصص لأغراض هذا المقال. واقتصر اختبار توليد الصوت على نموذج محاكاة محلي لنقطة نهاية Munsit الموثقة؛ لذا يُرجى اختبارهما على موقعك قبل الإطلاق الفعلي.
• تستند ميزات Munsit وتفاصيل خططه إلى وثائقه العامة التي تمت مراجعتها في أكتوبر 2026، وهي قابلة للتغيير.
• تتغير ميزات محركات البحث بمرور الوقت؛ لذا تحقق من وثائق Google المحدثة قبل الاعتماد على أي ميزة للبيانات المنظمة.
• أسماء المنتجات ملك لأصحابها المعنيين. ولا يقتضي ذكرها أي تبعية أو تأييد.