أفضل 15 مشغل صوت HTML5

لحسن الحظ، أضحت HTML5 المعيار لتصميم الويب متعدد الوسائط. لقد انتهت أيام المشاكل الناتجة عن ملحقات Flash وSilverlight، لأن دعم HTML5 لعناصر الصوت والفيديو على صفحة الويب جلب معياراً موحداً لكل المنصات -- دون ذكر فوائد ذلك على تحسين محركات البحث (بالإنجليزية Search Engine Optimization) والتخزين المؤقت دون شبكة.

فائدة أخرى لـ HTML5 هي سهولة تكيفها مع المنصات المختلفة. هذا يجعل تصميم، تطوير، ونشر مشغلات صوت مخصصة أسهل مما كان عليه في السابق -- مع جعله يعمل على سطح المكتب، الهواتف المحمولة، وأنظمة التشغيل المتعددة.

فيما يلي أفضل 15 مشغل صوت HTML5 متوفرة على Envato وهي أمثلة ممتازة لدرجة التقدم التي يمكن أن تصل إليها هذه المشغلات، وفي نفس الوقت كلٌ منها سهل التخصيص ويمتلك تصميمه الخاص.

1. Audio Waveform Player مع قائمة تشغيل

Audio Waveform Player مع قائمة تشغيل هو واحدٌ من مشغلات صوت HTML5 التي أفضلها. يستعير بعضاً من عناصره التصميم من مشغل SoundCloud كما يضيف بعض المزيات الإضافية المفيدة لمن يستضيف المقاطع الصوتية الخاصة به.

هذا المشغل المستجيب* بشكلٍ كامل والقابل للتخصيص يتمضن خيارات مفيدة مثل:

• وقت البدء والانتهاء
• تحميل المقطع الصوتي
  
• سرعة التشغيل
• المشاركة على وسائل التواصل الإجتماعية
• قوائم التشغيل
• تلميحات عن وظائف الأدوات (بالإنجليزية Tooltips)
• والمزيد غير ذلك

حل ممتاز للبرامج الإذاعية، الفرق الموسيقية، والمزيد، للمقاطع الصوتية المستضافة ذاتياً على Google Drive، أو Amazon S3، وحتى SoundCloud.    (*المترجم: التصميم المستجيب أو Responsive Design، هو منهج لتصميم صفحات الويب، الهدف منه هو عرض الصفحات بشكلٍ جيد على عددٍ مختلف من الأجهزة وأحجام الشاشات، لضمان سهولة الاستعمال ورضا المستخدم.)

مع الـ API القوية خاصته وتوافر عددٍ من الـ Callbacks، ستجد أن Audio Waveform Player مع قائمة تشغيل مصممٌ بشكلٍ جيد وقوي في نفس الوقت.

2. HTML5 Audio Player مع قائمة تشغيل

HTML5 Audio Player مع قائمة تشغيل هو خيارٌ قويٌ آخر.

مع API قوية ومظاهر غير محدودة للمشغل، يمكنك استعمال مشغل الصوت هذا بأي طريقةٍ يمكنك تخيلها.

تتضمن الميزات:

• دعم لقائمة تشغيل XML، أو HTML، أو من قاعدة بيانات
• إنشاء قوائم تشغيل بشكل تلقائي من المجلدات
• ترتيب وسحب عناصر قائمة تشغيلك
• مزج عدد من قوائم التشغيل\الأغاني
• دعم لتشغيل نسخ متعددة في نفس الوقت
• التشغيل باستخدام Flash في حال لم تتوفر HTML5
• والمزيد غير ذلك

من ناحية الشكل والوظيفة، مشغل الصوت هذا يمتلك الكثير من الخيارات وهو مشغلٌ رائع للبرامج الإذاعية، SoundCloud، وغيرها.

HTML5 Audio Player مع قائمة تشغيل قد يكون بشكل كبير أكثر مشغل صوت HTML5 مستجيب على الإطلاق.

3. MP3 Sticky Player

3. MP3 Sticky Player

مشغل صوت HTML5 هذا قوي، مستجيب، قابل للتخصيص بشكلٍ كامل ويمكن إضافته بسهولة إلى أهلى أو أسفل صفحتك الإلكترونية، ويعمل بشكلٍ ممتاز مع كل المتصفحات الكبرى والأجهزة المحمولة.

بعض الميزات الهامة الأخرى تتضمن:

• دعم لـ Google Drive وAmazon S3 ولكل الخدمات والخوادم التي تسمح بالوصول إلى ملف mp3
• تحميل قوائم التشغيل عن طريق XML أو HTML، مجلد mp3، برامج إذاعية، Youtube، أو SoundCloud
• أيضاً يدعم فيديوهات Youtube وmp4
• دعم لقوائم التشغيل المختلفة
• دعم للربط العميق*
• والمزيد غير ذلك

ستجد وفرةً من الخيارات وستة مظاهر مختلفة للتصميم مع ملفات PSD الخاصة بها مضمنة.    (*المترجم: الربط العميق أو Deep Linking، هو استعمال روابط تشعبية تشير إلى عنصر محدد في موقع إلكتروني بدلاً من الإشارة إلى الصفحة الرئيسية للموقع.)

MP3 Sticky Player هو مشغل HTML5 المثالي لكي تلصقه في موقعك الإلكتروني.

4. sPlayer - مشغل موسيقا HTML5 خارق

مشغل sPlayer يزيل الفارق بين مشغلات صوت سطح المكتب ومشغلات المواقع الإلكترونية:

"sPlayer يدفع HTML5إلى أقصى حد، ومن المؤكد أنه أول مشغل موسيقا HTML5 من نوعه، مما يجعله أكثر مكتبة صوت JavaScript غنىً بالوظائف."

تتضمن الميزات:

• دعم لقوائم التشغيل المتعددة
• تشغيل من الراديو وتشغيل من مصدر مباشر
• مجموعة أيقونات لأنواع الموسيقا
• بحث حي
• روابط للمشاركة

يمكنك حتى استيراد موسيقا محلية مع وسوم ID3 والمزيد غير ذلك.

من الويب إلى سطح المكتب، دعم كامل للهواتف، وصيغ سوتية مختلفة مدعومة (mp3, ogg, oga, aac, m4a, mp4)، فإن sPlayer جاهزٌ لكي تجعله مشغل الصوت خاصتك.

5. All in One Audio and Radio Player

سواءً أكنت تريد تشغيل أغنية واحدة، بناء برنامجٍ إذاعي، أو تشغيل صوت، فإن All in One Audio and Radio Player جاهز لبدء البث.

هذا المشغل جميل المظهر يدعم:

• تدفق ACC و+ACC
  
• SoundCloud
• Shoutcast
• Icecast
• Spotify
• iTunes
• MP3
• OGG
• Wav

مع ثيمات مختلفة وAPI قوية، يمكنك تخصيص مشغل صوت HTML5 هذا بأي شكلٍ يمكنك تصوره.

بعض الميزات تتضمن:

• يدعم اللمس على الهواتف ويدعم التحكم عن طريق لوحة المفاتيح
• دعم لصورة خلفية ولتدرج CSS
• API قوية وتوثيق مفصل (بالإنجليزية Documentation)
• استعمال عدة نسخ من المشغل على صفحة واحدة
• والمزيد غير ذلك

All in One Audio and Radio Player هو خيارٌ مثير للإعجاب لتشغيل الصوت باستخدام HTML5.

6. Responsive HTML5 Audio Player PRO مع قائمة تشغيل

Responsive HTML5 Audio Player PRO مع قائمة تشغيل هو خيار قوي. مع واجهته القابلة للتخصيص بشكلٍ كلي، يمكنك دمج هذا المشغل بشكل مثالي ضمن تصميم موقعك الإلكتروني.

كما تتوافر أيضاً نسخة لـ WordPress.

بعضٌ من أفضل خصائصه تتضمن:

• خيارات التحميل وخلط الأغاني
• المشاركة الإجتماعية
• فئات لقوائم التشغيل
• خيار البحث
• والمزيد

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

إذا كنت تبحث عن مشغل صوت HTML5 قوي يمكن تخصيصه لكي يماثل التصميم الخاص بك، الق نظرة أقرب على Responsive HTML5 Audio Player PRO مع قائمة تشغيل.

7. ProgressionPlayer - مشغل صوت\فيديو مستجيب

إذا كنت تريد تضمين بعض مقاطع الفيديو بالإضافة إلى المقاطع الصوتية، فإنك سترغب باستعمال ProgressionPlayer. إنه سهل التخصيص، مستجيب بشكلٍ كلي، ويتضمن كل الميزات الأساسية التي ترغب بها في أي مشغل صوت HTML5.

"مشغلات Flash وSliverlight الخاصة التي تحاكي HTML5 MediaElement API لمستعرضات الويب القديمة"

تتضمن الميزات:

• عدد لا محدود من نسخ المشغل في كل صفحة
• يتضمن خمسة مظاهر
• قوائم تشغيل صوتية
• Retina-Ready*
• والمزيد

ProgressionPlayer هو مثالي لتشغيل عدة نسخ على نفس الصفحة، لأن المشغلات تتوقف أوتوماتيكياً عند تشغيل مشغلٍ آخر.    (*المترجم: الرسوم والمواقع التي تكون Retina Ready، تحتوي على بيكسلات أكثر في كل إنش مربع، مما يسمح بصورة أنعم وأنقى حتى عند تكبير المشاهد لصفحة الويب.)

تتوافر أيضاً نسخة لـ WordPress.

8. Single jQuery Audio Player (للموسيقا والراديو)

مع تصميمه الأنيق وميزاته المبتكرة، Single jQuery Audio Player هو حل رائع للبث الحي وللفنانين الموسيقيين.

كل نسخة مشغل يمكن إعدادها بشكل مختلف باستعمال الـ API المفيد خاصته:

• تحميل مباشر
• موسيقا Apple وAmazon
• تعديل العنوان، اسم الفنان، وصورة العمل الفني

بعض الميزات المفيدة الأخرى تتضمن:

• دعم للتشغيل من Shoutcast, Icecast, SoundCloud والبث الحي أو من الراديو
• دعم لـ MP3 وOGG وWAV
• توثيق مفصل
• يدعم اللمس
• والمزيد

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

مع تصميمه البسيط جداً والـ API القوية خاصته، Single jQuery Audio Player هو واحدٌ من أفضل مشغلات صوت HTML5 للموسيقيين وللبث الحي.

9. DS SoundCloud Custom Music Player

إذا كنت تحب SoundCloud، لكنك ترغب باستعمال المشغل الخاص بك، فإنك ستختار DS SoundCloud Custom Music Player.

"DS SoundCloud Music Player هو إضافة jQuery ديناميكية مصممة لكي تسمح بتشغيل الصوت على المواقع الإلكترونية، باستعمال HTML5 وjQuery. إنه مصممة بالاعتماد على تقنية SoundCloud ويمكن استعماله كبديل عن مشغلات SoundCloud التي يتم تضمينها في صفحات الويب."

تتضمن الميزات:

• خفيف الوزن، مبني على السحاب، ولا حاجة إلى Flash
• جلب البيانات بشكلٍ تلقائي من SoundCloud
• دمج لفيسبوك وتويتر
• دعم لقائمة تشغيل خاصة
• والمزيد

DS SoundCloud Music Player هو بديلٌ ناجج لمشغل SoundCloud الإفتراضي -- مع القليل من الأمور الإضافية.

10. Clean HTML Audio Player مع قائمة تشغيل

مرتب وبسيط.

هذا بالضبط هو Clean HTML Audio Player.

استضافة ذاتية أو بث إذاعي، يمكن لهذا المشغل التعامل مع كلا الأمرين.

بعض الميزات الاخرى تتضمن:

• دعم لقوائم التشغيل وللنسخ المتعددة
• سمات HTML بسيطة للبيانات
• مستجيب بشكلٍ كامل وRetina-Ready
• والمزيد

Clean HTML Audio Player بسيط، سهل الاستعمال، وكما هو واضح من اسمه، مرتب.

11. Easy Audio Player

Easy Audio Player هو مشغل صوت بسيط، قوي، ومتكامل ويمكن تخصيصه كما يحلو لك.

يوفر API متكاملة ويعمل مع الهواتف المحمولة بشكلٍ ممتاز.

الميزات الإضافية تتضمن:

• كل الأزرار إختيارية، قم بتخصيصه كما تشاء
• حركة تقديمية إختيارية
• توثيق مفصل
• أربعة مظاهر مع ملفات PSD الخاصة بها
• الرجوع إلى Flash عند عدم توافر HTML5
• والمزيد

Easy Audio Player سهل الإعداد، سهل الإستعمال، وخيارٌ سهل.

12. tPlayer - (مشغل صوت (مع قائمة تشغيل) نسخة 1.5

إذا كنت أبحث عن مشغل صوت HTML5 مصممٍ بشكلٍ جيد، وبمظهر عصري فإن tPlayer هو واحدٌ من أولى خياراتي.

أزراره المتجهية، حركاته، وغطاؤه الجانبي المرن يجعلان مظهر هذا المشغل جميلاً جداً.

بعض ميزاته تتضمن:

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

tPlayer هو مشغل رائع المظهر، كما أنه متوافر لـ WordPress.

13. ZoomSounds - مشغل صوت HTML5 أنيق

ZoomSounds هو من أفضل مشغلات الصوت مبيعاً ويعود ذلك لسببٍ جيد.

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

تتضمن الميزات:

• دعم لتحسين محركات البحث
• دعم للمس
• تشغيل الصوت من Youtube
• مستجيب بشكل كامل مع عودة إلى Flash عند الحاجة
• يدعم التشغيل من SoundCloud
• والمزيد المزيد

مع ZoomSounds ستبدو المقاطع الصوتية الخاصة بك في أبهى حللها.

14. Chameleon HTML5 Audio Player مع\بدون قائمة تشغيل

Chameleon HTML5 Audio Player سيندمج بسهولة في موقعك الإلكتروني مع مخطط ألوانه القابل للتخصيص وعناصره المرئية.

الميزات الإضافية تتضمن:

• توليد قوائم التشغيل من مجلدات تحتوي على ملفات mp3
• دعم للنسخ المتعددة
  
• ما يزيد عن 35 خياراً لـ JavaScript
• يدعم الهواتف المحمولة
• والمزيد

يمكن أيضاً الحصول على Chameleon HTML5 Audio Player من أجل WordPress.

15. HTML5 Vinyl-styled Music Player

كشخص يحب أسطوانات الفونوغراف (الفينيل)، فإن HTML5 Vinyl-styled Music Player ببساطة هو واحدٌ من خياراتي المفضلة على هذه القائمة.

فالأسطوانة الموسيقة لا تسحب فقط من غطاء الرسم الفني للألبوم، بل تعمل الأسطوانة التي تتحرك بشكلٍ دائري كأداة للتنقل في المقطع الصوتي.

رائع.

بعض الميزات الأخرى التي قد تثير اهتمامك:

• إنشاء قوائم تشغيل أو اختيار نمط التشغيل العشوائي
• يدعم اللمس ومستجيب بشكلٍ كلي
• تغيير السرعة، مع تفعيل التكرار أو تشغيل شيء عشوائي
• تحميل الأوسمة والأغطية تلقائياً
• والمزيد

HTML5 Vinyl-styled Music Player هو بسهولة أروع مشغل صوت HTML5 يمكنك أن تجده.

خاتمة

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

ستجد على Envato Tuts+ كل أنواع المصادر المفيدة لتعلم HTML5، مثل دروس HTML5، كتب إلكترونية عن البرمجة، ودورات فيديو لتعليم البرمجة. تعلم ما هي HTML5، ابدأ بفك تشفير المقاطع الصوتية باستخدام HTML5، بالإضافة إلى أخذ دورات متقدمة في HTML5.

ما هي ميزات مشغل HTML5 للصوتيات التي تهمك بأكبر قدر؟