أنا معجب كبير بآبار واجهات برمجة التطبيقات HTML5 و JavaScript ، بعد استكشاف الكثيرين ، بما في ذلك GetUsermedia ، و APIs على شبكة الإنترنت ، وواجهة برمجة تطبيقات اتجاه الشاشة (مع مستودع GitHub مخصص). توضح هذه المقالة بناء مشغل صوت JavaScript المناسب للهاتف المحمول يستفيد من العديد من واجهات برمجة التطبيقات لتجربة مستخدم محسّنة.

ميزات المفتاح:

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

استخدام API:

يستخدم اللاعب واجهات برمجة التطبيقات هذه:

• API Appient Light API: يعدل بشكل ديناميكي موضوع صفحة الويب (Dark/Light) وفقًا لمستويات الضوء المحيط.
• API القرب: يلعب/يتوقف عن الصوت بناءً على اكتشاف مستشعر القرب.
• API لحالة البطارية: يراقب مستوى البطارية ويتوقف عن الصوت عندما يكون منخفضًا للغاية.
• إعلامات الويب API: ينبه المستخدم حول البطارية المنخفضة والتوقف عن الصوت.
• API الاهتزاز: يوفر ملاحظات haptic لتعزيز إشعارات مستوى البطارية.

يفترض البرنامج التعليمي الألفة مع واجهات برمجة التطبيقات هذه. يستخدم اللاعب HTML5 الأصلي

html واضح ومباشر: وصف موجز ،

عنصر مع تمكين عناصر التحكم الأصلية ( السمة) ، ورابط ورقة css ، وإدراج ملف JavaScript. يحتوي الجسم في البداية على

  
  
  
  
  
  


  
APIs-powered Audio Player
  
This demo showcases a simple APIs-powered audio player using the Proximity, Battery Status, Vibration, Web Notifications, and Ambient Light APIs.
  
  

يحدد CSS أنماطًا للجسم

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

body {
  max-width: 600px;
  margin: 0 auto;
  font-size: 20px;
  padding: 0 1em;
}

.dark-theme {
  background-color: #000000;
  color: #FFFFFF;
}

.normal-theme {
  background-color: #B8FFF7;
  color: #C53131;
}

.light-theme {
  background-color: #FFFFFF;
  color: #000000;
}

أسئلة يتم طرحها بشكل متكرر (الأسئلة الشائعة): (يتم الاحتفاظ بهذه الأسئلة الشائعة من المدخلات الأصلية ، ولكن يتم ضبط وضعها لتحسين التدفق وقابلية القراءة.)

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