كيفية تضمين مشغل MP3 مجاني على موقع الويب الخاص بك: 3 طرق

كيفية تضمين مشغل MP3 مجاني على موقع الويب الخاص بك: 3 طرق

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





سنقوم بتفصيل الطرق المختلفة التي يمكنك استخدامها لتضمين ملف MP3 على موقع الويب الخاص بك ، بما في ذلك استخدام HTML5 و Google Drive.





1. قم بتضمين ملف MP3 على موقع الويب الخاص بك باستخدام HTML5

إذا كنت مرتاحًا لتحرير رمز موقع الويب الخاص بك ، فإن إحدى أسهل الطرق لتضمين ملف MP3 هي استخدام HTML5.





HTML5 قد تبدو العلامة أساسية للوهلة الأولى ، لكنها قوية لأنها متوافقة مع جميع متصفحات سطح المكتب والجوال الرئيسية.

لتضمين ملف MP3 مع HTML5 ، استخدم هذا الكود:



Your browser does not support the audio tag.

ببساطة استبدل رابط MP3 هنا مع ملف الصوت الذي تم تحميله. لا يمكن أن يكون هذا ملفًا مخزّنًا على جهاز الكمبيوتر الخاص بك ؛ يجب أن يكون متاحًا عبر الإنترنت.

كيف تجد الملابس التي تظهر في البرامج التلفزيونية

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





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

يمكنك تطبيق سمات مثل تشغيل تلقائي و حلقة ، مثل ذلك:





Your browser does not support the audio tag.

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

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

يمكن العثور على مزيد من المعلومات حول سمات مشغل صوت HTML5 والتخصيص على MDN Web Docs .

كيفية توصيل القرص الصلب بجهاز كمبيوتر محمول

متعلق ب: تأثيرات HTML الرائعة يمكن لأي شخص إضافتها إلى مواقع الويب الخاصة به

2. تضمين ملف MP3 على موقع الويب الخاص بك باستخدام Google Drive

Google Drive هو امتداد مزود تخزين سحابي ممتاز ومجاني . يمكنك استخدامه لتحميل ملف MP3 الخاص بك وإنشاء مشغل صوتي.

مع تحميل MP3 على Google Drive:

  1. انقر على اليمين الملف وانقر فوق خذ رابط .
  2. قم بتغيير تقييد الوصول إلى أي شخص لديه الرابط .
  3. أخيرًا ، انقر فوق انسخ الرابط .

سيعطيك هذا عنوان URL مشابهًا لهذا:

https://drive.google.com/file/d/123/view?usp=sharing

يحل محل عرض؟ usp = تقاسم مع معاينة ، مثل ذلك:

https://drive.google.com/file/d/123/preview

ثم استخدم ملف

يمكنك ضبط السمات أو الإضافة إليها أو إزالتها (مثل فراميبور و العرض ) عند الضرورة.

سيؤدي ذلك إلى تضمين ملف MP3 على موقع الويب الخاص بك باستخدام مشغل Google Drive. يمكن للمستخدمين تشغيل الصوت وفركه وضبطه ، تمامًا كما هو الحال مع مشغل HTML5. هذا ما يبدو عليه:

الاختلاف الرئيسي هو وجود ملف يقتلع زر. يؤدي هذا إلى فتح ملف MP3 على Google Drive ، حيث يمكن للمستخدمين إضافة تعليقات ومشاركة الملف والمزيد.

3. تضمين ملف MP3 على موقع الويب الخاص بك باستخدام CMS

إذا كنت تستخدم نظام إدارة المحتوى (CMS) لموقعك على الويب ، فلا يزال بإمكانك على الأرجح استخدام الطرق المذكورة أعلاه. ومع ذلك ، قد لا تشعر بالراحة عند تعديل كود HTML.

كيفية إضافة أموال إلى محفظة ps4 للأطفال

سيسمح لك أي CMS جيد بإضافة صوت إلى موقع الويب الخاص بك بسهولة من خلال واجهته. على سبيل المثال ، في WordPress ، ما عليك سوى القيام بذلك إضافة كتلة ، تحديد صوتي ، ثم إما تحميل MP3 ، حدده من ملف مكتبة الوسائط ، أو إدراج من URL .

سواء كنت تستخدم مواقع Google أو ExpressionEngine أو خدمة مثل Squarespace ، ستكون عملية إضافة الصوت مختلفة قليلاً ، لذا تأكد من الرجوع إلى وثائق المساعدة الخاصة بالشركة للحصول على إرشادات كاملة.

دع زوار موقعك يستمعون إلى ملفات MP3 بسهولة

باستخدام أي من الطرق المذكورة أعلاه ، سيتمكن زوار موقعك الآن من الاستماع إلى ملفات MP3 من خلال مشغل الوسائط بسهولة.

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

يشارك يشارك سقسقة بريد الالكتروني أكثر 10 تنسيقات صوتية شيوعًا: أي منها يجب أن تستخدمه؟

أنت تعرف عن MP3 ، ولكن ماذا عن AAC أو FLAC أو OGG أو WMA؟ لماذا يوجد الكثير من تنسيقات الملفات الصوتية وهل هناك أفضل تنسيق صوتي؟

اقرأ التالي
مواضيع ذات صلة
  • إنترنت
  • تطوير الشبكة
  • أدوات مشرفي المواقع
  • HTML5
نبذة عن الكاتب جو كيلي(تم نشر 652 مقالة)

وُلد Joe ولوحة مفاتيح في يديه وبدأ على الفور الكتابة عن التكنولوجيا. لديه بكالوريوس (مع مرتبة الشرف) في الأعمال وهو الآن كاتب مستقل بدوام كامل يستمتع بجعل التكنولوجيا بسيطة للجميع.

المزيد من Joe Keeley

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك