واجهة برمجة تطبيقات جلسة الوسائط

تعزيز تجربة وسائل الإعلام

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

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

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

قال ببساطة ، وببساطة

يعد تنفيذ "واجهة برمجة تطبيقات جلسة الوسائط" واضحًا جدًا ولا يتطلب سوى بضعة أسطر من التعليمات البرمجية.

function setMediaSessionMetaData(props){
  // Progressive enhancement of your PWA,
  // which means we have to check if the
  // new API is available.
  if(!('mediaSession' in navigator)){
    return;
  }
  
  navigator.mediaSession.metadata = new MediaMetadata({
    title: props.title,
    artist: props.artist
    album: props.album,
    artwork: props.artwork
  });
  
  // Add action handlers, if any.
  // For a complete list, check out the
  // MDN-link in the addendum.
  if(props.play){
    navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
  }
}

// ... Later in your code ...

setMediaSessionMetaData({
  title: "Song name",
  artist: "Artist name",
  album: "Album name",
  artwork: [{ 
    src: 'https://dummyimage.com/512x512',
    sizes: '512x512',
    type: 'image/png' }]
});

إذا كنت تستخدم Typescript ، فهناك أيضًا حزمة بها تعريفات الأنواع ذات الصلة المتاحة على NPM.

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

كلمات ختامية

تعد "واجهة برمجة تطبيقات جلسة الوسائط" إضافة بسيطة جدًا إلى PWA الخاص بك ، والتي تتيح للمستخدمين تجربة الأغاني أو مقاطع الفيديو باستخدام بيانات وصفية وعناصر تحكم محسّنة. تم وضع علامة API حاليًا على أنها تجريبية ، ولكن يمكن استخدامها بالفعل مع معظم المتصفحات الحديثة.