كيفية إضافة صوت و Loader إلى موقع الويب باستخدام HTML و CSS و JavaScript؟

إضافة صوت ترحيبي و Loader 

 لإضافة صوت الترحيب ، تستطيع استخدام عنصر HTML5 audio ، ويتم تشغيله باستخدام JavaScript.

أولاً ، قم بإنشاء عنصر audio في HTML الخاص بك باستخدام العلامة <audio> ، وحدد مصدر الصوت الخاص بك باستخدام العلامة <source> ، كما يلي:

<audio id="welcome-sound">
  <source src="path/to/sound/file.mp3" type="audio/mp3">
</audio>

بعد ذلك، عليك استخدام addEventListener لتعيين حدث load لتشغيل الصوت عندما تنتهي صفحة الويب من التحميل بدلاً من استخدام window.onload.

وسنعتمد على حدث DOMContentLoaded بدلاً من load لتحديد الحدث الذي يتم إطلاقه عندما يتم تحميل كل العناصر في الصفحة بشكل كامل بدلاً من انتظار الصفحة بالكامل (مثل الصور) للانتهاء من التحميل ، وهذا يجعل الصفحة تستجيب بشكل أسرع.

document.addEventListener("DOMContentLoaded", function(event) { 
  // تشغيل الصوت
  document.getElementById('welcome-sound').play();
});

إضافة loader إلى صفحتك 

سيتم الجمع ما بين استخدام العناصر المختلفة في CSS لإنشاء loader مخصص،  وتستطيع استخدام صور GIF المحملة مسبقًا ، مثل الصورة التي أرفقتها، أو يمكنك استخدام الرسومات SVG أو CSS لإنشاء loader.

بعد ذلك ، سنعتمد على JavaScript لإظهار وإخفاء loader بناءً على حالة تحميل الصفحة.

HTML

 <!-- loader -->
  <div class="loader">
    <img src="path/to/loader/image.gif">
  </div>

CSS

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

في الكود أعلاه ، يتم إنشاء loader باستخدام حدود CSS ودائرة مع مجموعة محددة من الألوان. يتم إنشاء الحركة باستخدام animation CSS ، والذي يسمح لل loader بالدوران بشكل لا نهائي.

Javascript

document.addEventListener("DOMContentLoaded", function(event) { 
  const loader = document.querySelector(".loader");
  loader.style.display = "none"; // إخفاء loader عند بدء تحميل الصفحة
  
  // تشغيل الصوت
  document.getElementById('welcome-sound').play();
  
  // إظهار loader بعد 3 ثوانٍ من بدء تحميل الصفحة
  setTimeout(function() {
    loader.style.display = "block";
  }, 3000);
  
  // إخفاء loader بعد 5 ثوانٍ من بدء تحميل الصفحة
  setTimeout(function() {
    loader.style.display = "none";
  }, 5000);
});

من خلال استهداف العنصر .loader باستخدام document.querySelector يتم إخفاؤه باستخدام style.display = "none".

ثم تشغيل الصوت بواسطة

document.getElementById('welcome-sound').play();.

بعد ذلك ، يتم استخدام setTimeout لإظهار loader بعد 3 ثوانٍ من بدء تحميل الصفحة ، وإخفائه بعد 5 ثواني.

 إضافة صوت عندما يقوم الزائر بإنشاء حساب جديد

عليك باستخدام العنصر audio في HTML لتشغيل الصوت ويمكنك تعيين مصدر الصوت في الـ JavaScript.

بالنسبة لإضافة اسم العميل المسجل إلى رسالة الصوت ، سنعتمد على قيمة العنصر input الخاص بالاسم لاسترداد الاسم الذي قام المستخدم بكتابته.

ثم يمكنك إضافة هذا الاسم إلى نص الرسالة الصوتية باستخدام concat في JavaScript.

HTML

<input type="text" id="name" placeholder="الاسم">
<button id="submit">إنشاء الحساب</button>
<audio id="welcome-sound">
  <source src="welcome.mp3" type="audio/mpeg">
</audio>

Javascript

document.getElementById("submit").addEventListener("click", function() {
  const name = document.getElementById("name").value;
  const welcomeMessage = "مرحباً " + name + "! تم إنشاء حسابك بنجاح";
  const audio = document.getElementById("welcome-sound");
  audio.src = "welcome.mp3"; // مصدر الصوت
  audio.play();
  setTimeout(function() {
    alert(welcomeMessage);
  }, 3000); // 3 ثوانٍ للتأكد من عرض الرسالة الصوتية بشكل كامل
});

الكود يستخدم addEventListener لاستماع حدث النقر على الزر "إنشاء الحساب".

ويتم استخدام قيمة العنصر input الخاص بالاسم لإعداد رسالة الترحيب بشكل ديناميكي. ثم يتم تشغيل الصوت وإضافة رسالة الترحيب إلى الـ alert التي تظهر بعد ثلاث ثوانٍ من تشغيل الصوت.

ويمكنك تغيير المدة المحددة في setTimeout وفقًا لاحتياجاتك.

بتاريخ 2 دقائق مضت قال Mustafa Suleiman:

إضافة صوت ترحيبي و Loader 

 لإضافة صوت الترحيب ، تستطيع استخدام عنصر HTML5 audio ، ويتم تشغيله باستخدام JavaScript.

أولاً ، قم بإنشاء عنصر audio في HTML الخاص بك باستخدام العلامة <audio> ، وحدد مصدر الصوت الخاص بك باستخدام العلامة <source> ، كما يلي:

<audio id="welcome-sound">
  <source src="path/to/sound/file.mp3" type="audio/mp3">
</audio>

بعد ذلك، عليك استخدام addEventListener لتعيين حدث load لتشغيل الصوت عندما تنتهي صفحة الويب من التحميل بدلاً من استخدام window.onload.

وسنعتمد على حدث DOMContentLoaded بدلاً من load لتحديد الحدث الذي يتم إطلاقه عندما يتم تحميل كل العناصر في الصفحة بشكل كامل بدلاً من انتظار الصفحة بالكامل (مثل الصور) للانتهاء من التحميل ، وهذا يجعل الصفحة تستجيب بشكل أسرع.

document.addEventListener("DOMContentLoaded", function(event) { 
  // تشغيل الصوت
  document.getElementById('welcome-sound').play();
});

إضافة loader إلى صفحتك 

سيتم الجمع ما بين استخدام العناصر المختلفة في CSS لإنشاء loader مخصص،  وتستطيع استخدام صور GIF المحملة مسبقًا ، مثل الصورة التي أرفقتها، أو يمكنك استخدام الرسومات SVG أو CSS لإنشاء loader.

بعد ذلك ، سنعتمد على JavaScript لإظهار وإخفاء loader بناءً على حالة تحميل الصفحة.

HTML

 <!-- loader -->
  <div class="loader">
    <img src="path/to/loader/image.gif">
  </div>

CSS

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

في الكود أعلاه ، يتم إنشاء loader باستخدام حدود CSS ودائرة مع مجموعة محددة من الألوان. يتم إنشاء الحركة باستخدام animation CSS ، والذي يسمح لل loader بالدوران بشكل لا نهائي.

Javascript

document.addEventListener("DOMContentLoaded", function(event) { 
  const loader = document.querySelector(".loader");
  loader.style.display = "none"; // إخفاء loader عند بدء تحميل الصفحة
  
  // تشغيل الصوت
  document.getElementById('welcome-sound').play();
  
  // إظهار loader بعد 3 ثوانٍ من بدء تحميل الصفحة
  setTimeout(function() {
    loader.style.display = "block";
  }, 3000);
  
  // إخفاء loader بعد 5 ثوانٍ من بدء تحميل الصفحة
  setTimeout(function() {
    loader.style.display = "none";
  }, 5000);
});

من خلال استهداف العنصر .loader باستخدام document.querySelector يتم إخفاؤه باستخدام style.display = "none".

ثم تشغيل الصوت بواسطة

document.get

شكرا لك استاذ سليمان اقدر تعبك وكل عام وانتم بخير عيدكم مبارك

بجرب واشوف انشاءلله

بتاريخ 42 دقائق مضت قال Mustafa Suleiman:

إضافة صوت ترحيبي و Loader 

 لإضافة صوت الترحيب ، تستطيع استخدام عنصر HTML5 audio ، ويتم تشغيله باستخدام JavaScript.

أولاً ، قم بإنشاء عنصر audio في HTML الخاص بك باستخدام العلامة <audio> ، وحدد مصدر الصوت الخاص بك باستخدام العلامة <source> ، كما يلي:

<audio id="welcome-sound">
  <source src="path/to/sound/file.mp3" type="audio/mp3">
</audio>

بعد ذلك، عليك استخدام addEventListener لتعيين حدث load لتشغيل الصوت عندما تنتهي صفحة الويب من التحميل بدلاً من استخدام window.onload.

وسنعتمد على حدث DOMContentLoaded بدلاً من load لتحديد الحدث الذي يتم إطلاقه عندما يتم تحميل كل العناصر في الصفحة بشكل كامل بدلاً من انتظار الصفحة بالكامل (مثل الصور) للانتهاء من التحميل ، وهذا يجعل الصفحة تستجيب بشكل أسرع.

document.addEventListener("DOMContentLoaded", function(event) { 
  // تشغيل الصوت
  document.getElementById('welcome-sound').play();
});

إضافة loader إلى صفحتك 

سيتم الجمع ما بين استخدام العناصر المختلفة في CSS لإنشاء loader مخصص،  وتستطيع استخدام صور GIF المحملة مسبقًا ، مثل الصورة التي أرفقتها، أو يمكنك استخدام الرسومات SVG أو CSS لإنشاء loader.

بعد ذلك ، سنعتمد على JavaScript لإظهار وإخفاء loader بناءً على حالة تحميل الصفحة.

HTML

 <!-- loader -->
  <div class="loader">
    <img src="path/to/loader/image.gif">
  </div>

CSS

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

في الكود أعلاه ، يتم إنشاء loader باستخدام حدود CSS ودائرة مع مجموعة محددة من الألوان. يتم إنشاء الحركة باستخدام animation CSS ، والذي يسمح لل loader بالدوران بشكل لا نهائي.

Javascript

document.addEventListener("DOMContentLoaded", function(event) { 
  const loader = document.querySelector(".loader");
  loader.style.display = "none"; // إخفاء loader عند بدء تحميل الصفحة
  
  // تشغيل الصوت
  document.getElementById('welcome-sound').play();
  
  // إظهار loader بعد 3 ثوانٍ من بدء تحميل الصفحة
  setTimeout(function() {
    loader.style.display = "block";
  }, 3000);
  
  // إخفاء loader بعد 5 ثوانٍ من بدء تحميل الصفحة
  setTimeout(function() {
    loader.style.display = "none";
  }, 5000);
});

من خلال استهداف العنصر .loader باستخدام document.querySelector يتم إخفاؤه باستخدام style.display = "none".

ثم تشغيل الصوت بواسطة

document.getElementById('welcome-sound').play();.

بعد ذلك ، يتم استخدام setTimeout لإظهار loader بعد 3 ثوانٍ من بدء تحميل الصفحة ، وإخفائه بعد 5 ثواني.

 إضافة صوت عندما يقوم الزائر بإنشاء حساب جديد

عليك باستخدام العنصر audio في HTML لتشغيل الصوت ويمكنك تعيين مصدر الصوت في الـ JavaScript.

بالنسبة لإضافة اسم العميل المسجل إلى رسالة الصوت ، سنعتمد على قيمة العنصر input الخاص بالاسم لاسترداد الاسم الذي قام المستخدم بكتابته.

ثم يمكنك إضافة هذا الاسم إلى نص الرسالة الصوتية باستخدام concat في JavaScript.

HTML

<input type="text" id="name" placeholder="الاسم">
<button id="submit">إنشاء الحساب</button>
<audio id="welcome-sound">
  <source src="welcome.mp3" type="audio/mpeg">
</audio>

Javascript

document.getElementById("submit").addEventListener("click", function() {
  const name = document.getElementById("name").value;
  const welcomeMessage = "مرحباً " + name + "! تم إنشاء حسابك بنجاح";
  const audio = document.getElementById("welcome-sound");
  audio.src = "welcome.mp3"; // مصدر الصوت
  audio.play();
  setTimeout(function() {
    alert(welcomeMessage);
  }, 3000); // 3 ثوانٍ للتأكد من عرض الرسالة الصوتية بشكل كامل
});

الكود يستخدم addEventListener لاستماع حدث النقر على الزر "إنشاء الحساب".

ويتم استخدام قيمة العنصر input الخاص بالاسم لإعداد رسالة الترحيب بشكل ديناميكي. ثم يتم تشغيل الصوت وإضافة رسالة الترحيب إلى الـ alert التي تظهر بعد ثلاث ثوانٍ من تشغيل الصوت.

ويمكنك تغيير المدة المحددة في setTimeout وفقًا لاحتياجاتك.

كل شي ضبط تقريبا شكرا لك لكن انا احتاج اضيف هذا ال loader ويكون على الصفحة كامله

عليك بإضافة مسار الصورة الصحيح في الكود الذي اشرت إليه سابقٌا، فمثلاً لو كانت الصورة داخل مجلد images في مجلد المشروع فسيصبح المسار كالتالي:

<!-- loader -->
  <div class="loader">
    <img src="images/loader.gif">
  </div>

بتاريخ 5 دقائق مضت قال Mustafa Suleiman:

عليك بإضافة مسار الصورة الصحيح في الكود الذي اشرت إليه سابقٌا، فمثلاً لو كانت الصورة داخل مجلد images في مجلد المشروع فسيصبح المسار كالتالي:

<!-- loader -->
  <div class="loader">
    <img src="images/loader.gif">
  </div>

 

نعم سويتها لكن ظهر معي بالشكل هذا بسبب ملف ال css

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

السبب هو أنك قمت بنسخ تنسيق CSS الخاص بالـ Loader السابق حيث أنني وفرت لك تنسيق للـ Loader بسيط يقوم بالدوران، أما إذا أردت استخدام الصورة فعليك باستخدام تنسيق مختلف أي قم بإزالة التنسيق الذي نسخته أنت.

وعليك بتنسيق كلاس .loader بالشكل الذي تراه مناسبًا.

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

بتاريخ 26 دقائق مضت قال Mustafa Suleiman:

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

السبب هو أنك قمت بنسخ تنسيق CSS الخاص بالـ Loader السابق حيث أنني وفرت لك تنسيق للـ Loader بسيط يقوم بالدوران، أما إذا أردت استخدام الصورة فعليك باستخدام تنسيق مختلف أي قم بإزالة التنسيق الذي نسخته أنت.

وعليك بتنسيق كلاس .loader بالشكل الذي تراه مناسبًا.

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

باقي اسويها بالصفحة كامله والصوت ما يشتغل

project.rar

بتاريخ On 22‏/4‏/2023 at 14:27 قال Anas Orfaly:

باقي اسويها بالصفحة كامله والصوت ما يشتغل

project.rar 598.16 kB · 1 تنزيل

انتبه الى ما تشير اليه رسالة الخطأ:

caught (in promise) DOMException: play() failed because the user didn't interact with the document first. h

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

تشير رسالة الخطأ إلى أن تابع التشغيل () فشل لأنه لم يبدأ من خلال تفاعل المستخدم، مثل النقر فوق زر أو ارتباط. يتم تشغيل هذا عادةً عند محاولة تشغيل الصوت أو الفيديو من خلال كود JavaScript الذي لم يتم تشغيله بواسطة حدث مستخدم ، مثل أحداث onclick أو onkeydown.

ولعمل حيلة بسيطة قصد حل هاته المشكلة، سنحاول الاستماع لأحدث الأحداث التي تحدث على الوثيقة لنتصرف بناءا عليها ونقوم بتشغيل هذا الصوت، وليكن مثلا حدث تمرير المؤشر على الوثيقة، فيكون التشغيل كالتالي:

document.addEventListener('mouseover' , () => {
     // تشغيل الصوت
     document.getElementById('welcome-sound').play();
})

سيعطي هذا نفس المقاربة تقريبا، اختبره.