إضافة زر الاستماع للمقالات صوتياً في بلوجر (Text-to-Speech) كود مجاني مفتوح المصدر

في عصر السرعة والمحتوى السريع، أصبح الكثير من متابعي المواقع يفضلون الاستماع إلى المقالات بدلاً من قراءتها، سواء أثناء القيادة، ممارسة الرياضة، أو ببساطة للراحة من إجهاد الشاشات. ولأننا في Dragon4Tech نحرص دائماً على تقديم حلول عملية ومبتكرة تخدم أصحاب المدونات، قمت بتطوير وإتاحة كود زر الاستماع الصوتي للمقالات (Text-to-Speech) لمدونات بلوجر بشكل مجاني ومفتوح المصدر بالكامل!

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

🎁 هدية لمجتمع المدونين (مفتوح المصدر Open Source):

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

مميزات زر الاستماع للمقالات في بلوجر

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

زر القراءة والاستماع الذكي لمقالات بلوجر

زر عائم أنيق للاستماع للمقال بصوت نقي وميزة تنقية الإعلانات والنصوص المزعجة

تنبيه هام وأمانة تقنية: أين يعمل الزر وأين يواجه قيوداً؟

من مبدأ الأمانة التقنية التي عودتكم عليها، يجب توضيح نقطة جوهرية بخصوص توافق الميزة مع المتصفحات:

المتصفح / الجهاز	حالة الدعم	السبب التقني وطريقة الاستخدام
Google Chrome (موبايل)	✅ يعمل بكفاءة 100%	الخبر السار أن متصفح كروم على الهواتف متصل بمحرك أندرويد الصوتي ويعمل بشكل رائع جداً.
Edge / Safari / Firefox (كمبيوتر)	✅ يعمل بكفاءة ممتازة	تدعم المحركات الصوتية المدمجة في أنظمة ويندوز وماك وتقرأ المقال بوضوح فائق.
Google Chrome (كمبيوتر PC)	⚠️ غير مدعوم حالياً	نسخة كروم للكمبيوتر لا تحتوي على مساعد ذكي أو محرك صوتي عربي مدمج افتراضياً، لذلك يفضل فتح المقال على Edge.
متصفح فيسبوك الداخلي (In-App)	ℹ️ رسالة توجيه تلقائية	المتصفح المدمج داخل تطبيق فيسبوك يحظر ميزات الصوت؛ لذا قمت ببرمجة الكود ليظهر تنبيهاً ذكياً يوجه الزائر لفتح المقال في متصفح كروم.

💡 حل مشكلة متصفح فيسبوك:

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

الكود المستخدم وطريقة تركيبه في مدونتك

تركيب الكود في غاية السهولة ولا يحتاج لأي خبرة برمجية. اتبع الخطوات التالية:

ادخل إلى لوحة تحكم بلوجر الخاصة بك، ثم توجه إلى قسم المظهر (Theme).
اضغط على السهم المجاور لزر "تخصيص" واختر تعديل HTML.
ابحث عن وسم الإغلاق </body> في نهاية القالب، وضع الكود التالي فوقه مباشرة، ثم اضغط حفظ.

<!-- كود زر الاستماع الصوتي للمقالات - Dragon4Tech -->
<style>
#tts-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 99999;
  padding: 12px 20px;
  background: #d24949;
  color: #fff;
  border: 0;
  border-radius: 30px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
  direction: rtl;
  transition: all 0.3s ease;
}
#tts-btn:hover {
  background: #b83b3b;
  transform: translateY(-2px);
}
</style>

<script>
//<![CDATA[
(function(){
  if(!/\.html/.test(location.pathname)) return;

  var post = document.querySelector('.post-body') || document.querySelector('.entry-content') || document.querySelector('.post-content') || document.querySelector('article') || document.querySelector('main');
  if(!post) return;

  var btn = document.createElement('button');
  btn.id = 'tts-btn'; 
  btn.type = 'button';
  btn.innerHTML = '🎧 كسلان تقرأ؟ اضغط للاستماع';
  document.body.appendChild(btn);

  var playing = false, session = 0, chunks = [], i = 0;

  function stop(){
    session++; 
    playing = false;
    if('speechSynthesis' in window) speechSynthesis.cancel();
    btn.innerHTML = '🎧 كسلان تقرأ؟ اضغط للاستماع';
  }

  function speak(s){
    if(s !== session) return;
    if(i >= chunks.length){ stop(); return; }

    var u = new SpeechSynthesisUtterance(chunks[i]);
    u.lang = 'ar-EG';

    if('speechSynthesis' in window) {
      var voices = speechSynthesis.getVoices();
      var v = null;
      voices.forEach(function(x){
        if(x.lang && x.lang.toLowerCase().indexOf('ar') === 0){ 
          if(!v || x.lang === 'ar-EG'){ v = x; } 
        }
      });
      if(v){ u.voice = v; u.lang = v.lang; }
    }

    u.onend = function(){ if(s === session){ i++; speak(s); } };
    u.onerror = function(){ if(s === session){ stop(); } };

    speechSynthesis.speak(u);
  }

  btn.onclick = function(){
    if(!('speechSynthesis' in window)){
      alert('متصفح فيسبوك/التطبيق الحالي لا يدعم ميزة الاستماع المباشر. يرجى فتح المقال في متصفح Google Chrome.');
      return;
    }

    if(playing){ stop(); return; }

    var clone = post.cloneNode(true);
    var junk = clone.querySelectorAll('script, style, noscript, iframe, .share-buttons, .ads, .post-share, .related-posts, .comments, .adsbygoogle');
    Array.prototype.forEach.call(junk, function(n){ n.remove(); });

    var text = clone.textContent.replace(/\s+/g, ' ').trim();
    var parts = text.match(/[^.!؟?]+[.!؟?]?/g) || [text];
    chunks = []; 
    var cur = '';

    parts.forEach(function(p){
      if((cur + p).length > 180){ if(cur) chunks.push(cur); cur = p; }
      else cur += p;
    });
    if(cur) chunks.push(cur);

    i = 0; 
    playing = true; 
    session++;
    btn.innerHTML = '⏹ إيقاف الاستماع';

    speechSynthesis.cancel();
    speak(session);
  };

  window.addEventListener('beforeunload', function(){ if('speechSynthesis' in window) speechSynthesis.cancel(); });
})();
//]]>
</script>

الخلاصة ودعوة للمطورين

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

💬 ما رأيك في هذه الميزة؟

هل جربت الاستماع للمقال عبر الزر العائم في هاتفك؟ شاركنا انطباعك في التعليقات، وإذا واجهتك أي مشكلة في تركيب الكود أخبرنا فوراً لمساعدتك!

مميزات زر الاستماع للمقالات في بلوجر

تنبيه هام وأمانة تقنية: أين يعمل الزر وأين يواجه قيوداً؟

الكود المستخدم وطريقة تركيبه في مدونتك

الخلاصة ودعوة للمطورين

Default